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

今天药忘吃喽~ 2021-07-24 14:21 1246阅读 0赞

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