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