rn 手动隐藏键盘、点击空白处隐藏键盘-蒲公英云

rn 手动隐藏键盘、点击空白处隐藏键盘

1、导入
    import {Keyboard} from 'react-native';
2、手动隐藏键盘
    在事件中设置:Keyboard.dismiss();
3、点击空白处隐藏键盘
    方式一:
        使用ScrollView作为父及以上容器
    方式二:
        使用TouchableWithoutFeedback组件,该按钮组件无任何视觉反馈效果
        使用TouchableWithoutFeedback在外层包裹,onPress事件中设置Keyboard.dismiss();
        子元素要占据全屏

代码示例:
使用ScrollView作为父及以上容器

import React,{ Component} from 'react'
import { 
  View,
  Text,
  StyleSheet,
  Button,
  TouchableOpacity,
  Image,
  TextInput,
  Keyboard,
  TouchableWithoutFeedback,
  ScrollView
} from 'react-native'
import TopBar from '../../components/common/Topbar'
class Search extends Component{ 
    state={ 
        value:''
    }
    renderLeft()
    { 
        return (
            <Button 
                title='<返回'
                onPress={ ()=>{ 
                    this.props.navigation.goBack()
                }}
            />
        )
    }
    renderMiddle()
    { 
        return (
            <TouchableOpacity>
                <Text>搜索全网折扣</Text>
            </TouchableOpacity>
            )
    }
    render()
    { 
        return(
            <View style={ { backgroundColor:'white',flex:1}}>
                <TopBar
                    leftItem={ this.renderLeft.bind(this)}
                    middleItem={ this.renderMiddle.bind(this)}
                />
                <ScrollView>
                { /* <TouchableWithoutFeedback onPress={()=>{ Keyboard.dismiss() }} > */}
                <View style={ styles.inp}>
                    <TextInput 
                        placeholder='搜索内容'
                        selectionColor='green'
                        style={ styles.ipt}
                        value={ this.state.value}
                        onChangeText={ (text)=>{ 
                            this.setState({ 
                                value:text
                            })
                        }}
                        numberOfLines = { 1}
                        clearButtonMode='while-editing'
                    />
                    <TouchableOpacity
                        onPress={ ()=>{ 
                            this.setState({ 
                                value:''
                            })
                            Keyboard.dismiss()
                        }}
                    >
                        <Text style={ styles.txt}>取消</Text>
                    </TouchableOpacity>
                </View>
                </ScrollView>
                { /* </TouchableWithoutFeedback> */}
            </View>
        )
    }
}
const styles = StyleSheet.create({ 
    inp:{ 
        flexDirection:'row',
        justifyContent:'center',
        marginTop:20,
        flex:1
    },
    ipt:{ 
        flex:1,
        height:40,
        backgroundColor:'#EDEAEF',
        borderRadius:10,
        marginLeft:10,
        marginRight:10
    },
    txt:{ 
        height:40,
        lineHeight:40,
        color:'green'
    }
})
export default Search

TouchableWithoutFeedback组件

import React,{ Component} from 'react'
import { 
  View,
  Text,
  StyleSheet,
  Button,
  TouchableOpacity,
  Image,
  TextInput,
  Keyboard,
  TouchableWithoutFeedback,
  ScrollView
} from 'react-native'
import TopBar from '../../components/common/Topbar'
class Search extends Component{ 
    state={ 
        value:''
    }
    renderLeft()
    { 
        return (
            <Button 
                title='<返回'
                onPress={ ()=>{ 
                    this.props.navigation.goBack()
                }}
            />
        )
    }
    renderMiddle()
    { 
        return (
            <TouchableOpacity>
                <Text>搜索全网折扣</Text>
            </TouchableOpacity>
            )
    }
    render()
    { 
        return(
            <View style={ { backgroundColor:'white',flex:1}}>
                <TopBar
                    leftItem={ this.renderLeft.bind(this)}
                    middleItem={ this.renderMiddle.bind(this)}
                />
                { /* <ScrollView> */}
                <TouchableWithoutFeedback
                    onPress={ ()=>{ 
                        Keyboard.dismiss()
                    }}
                >
                <View style={ styles.inp}>
                    <TextInput 
                        placeholder='搜索内容'
                        selectionColor='green'
                        style={ styles.ipt}
                        value={ this.state.value}
                        onChangeText={ (text)=>{ 
                            this.setState({ 
                                value:text
                            })
                        }}
                        numberOfLines = { 1}
                        clearButtonMode='while-editing'
                    />
                    <TouchableOpacity
                        onPress={ ()=>{ 
                            this.setState({ 
                                value:''
                            })
                            Keyboard.dismiss()
                        }}
                    >
                        <Text style={ styles.txt}>取消</Text>
                    </TouchableOpacity>
                </View>
                { /* </ScrollView> */}
                </TouchableWithoutFeedback>
            </View>
        )
    }
}
const styles = StyleSheet.create({ 
    inp:{ 
        flexDirection:'row',
        justifyContent:'center',
        marginTop:20,
        flex:1
    },
    ipt:{ 
        flex:1,
        height:40,
        backgroundColor:'#EDEAEF',
        borderRadius:10,
        marginLeft:10,
        marginRight:10
    },
    txt:{ 
        height:40,
        lineHeight:40,
        color:'green'
    }
})
export default Search