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