反应本机的散焦TextInput

时间:2020-07-23 22:15:19

标签: javascript reactjs typescript react-native expo

我想在react-native中创建一个搜索栏:

enter image description here

如果单击图标,则将焦点放在textInput上,但是如果单击屏幕的另一部分,则将textInput取消焦点。

焦点部分正在与ref配合使用,但是我不知道当我在屏幕的另一部分单击时是否可能使文本输入失去焦点。

<TextInput
    multiline={false}
    onChangeText={(text) => onChangeText(text)}
    placeholder="search"
    style={styles.textInput}
    value={value}
    ref={research}
></TextInput>
<TouchableOpacity onPress={()=>research.current.focus()}>
    <Ionicons name="md-search" size={24} ></Ionicons>
</TouchableOpacity>

1 个答案:

答案 0 :(得分:0)

您可以关闭键盘

import {Keyboard} from 'react-native'

<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
    <View style={{flex: 1}}>
        [your code in here]
    </View>
</TouchableWithoutFeedback>