小编Ous*_* Nm的帖子

在 TextInput 中写入一个字符后键盘隐藏问题(Flatlist 标题内的文本输入)

我花了两天时间解决这个问题,问题是:

当我将 TextInput 放入 Flatlist 中时,TextInput 的行为发生了变化,键盘在写入每个字符后失去焦点。

版本React-native:0.63.2,react:16.13.1,react-dom:16.13.1,expo:~42.0.1,

重现步骤

  • 我创建了一个名为 ==> [inputSearch, setInputSearch] 的状态变量
  • 我在 Flatlist 的 ListHeaderComponent 中编写了一个文本输入

---> 问题是:在键盘中按下每个字符后,键盘隐藏

国家声明:

const [inputSearch, setInputSearch] = useState(null);
Run Code Online (Sandbox Code Playgroud)

TextInput 位于 Flatlist 内:

    <View style={styles.container}>
    <StatusBar
         backgroundColor="#11131B"
         barStyle="light-content"
    />

    <View style={{width: '100%', flex: 1 , backgroundColor: 'white', marginTop: 5}}>

        <FlatList 
            contentContainerStyle={{alignItems: 'center',paddingHorizontal: 20}}
            keyExtractor={(item) => (Object.keys(item).length === 0) ? "" : item.id.toString()}
            width= {width}
            numColumns={2}
            ListHeaderComponent={() =>
                <View  style={{flexDirection:'column',justifyContent:'space-between'}}>

                   <Text style={{color:Colors.dark1, fontSize:14, marginBottom: 5}}>Search :</Text>
                   <TextInput style={styles.input} value={inputSearch} onChangeText={setInputSearch} placeholder="Username"/>

                </View> …
Run Code Online (Sandbox Code Playgroud)

lost-focus reactjs react-native react-native-flatlist react-native-textinput

3
推荐指数
1
解决办法
3328
查看次数