React Native TextInput setState() 隐藏键盘答案

【问题标题】：React Native TextInput setState() hides keyboardReact Native TextInput setState() 隐藏键盘
【发布时间】：2019-05-17 05:40:17
【问题描述】：

请查看零食链接， https://snack.expo.io/@banid/textinput 每当我调用 setState() 时，过滤器视图上的 TextInput（按下按钮时显示）隐藏键盘。我调用 setState 来更新 TextInput 的值。因此，我无法在 TextInput 上连续输入。这是一个错误还是我做错了什么？谢谢

【问题讨论】：

我可以在手机中输入。
我已经编辑了问题和点心，如果您不介意可以再检查一次吗？ @pritesh
是的，现在正在发生
你知道任何解决方法吗？？
这很奇怪，不应该这样发生。

标签： react-native react-native-android

【解决方案1】：

问题在于您正在创建一个新（匿名）函数，它会在每次更新时呈现 FlatList 的标题

<FlatList .... ListHeaderComponent={() => this.showHeader()} />

因此正在创建一个新的 TextInput 而不是更新现有的。

解决方案：

更改ListHeaderComponent={() => this.showHeader()}

ListHeaderComponent={this.showHeader} 作为 ListHeaderComponent 可以是一个函数

https://facebook.github.io/react-native/docs/flatlist#listheadercomponent

类似问题： https://github.com/react-native-training/react-native-elements/issues/559

【讨论】：

谢谢@Haythem Farhat，现在一切正常

【解决方案2】：

似乎在每个 setState 之后焦点都从 TextInput 中移除了，您可以使用以下解决方法：

改变

this.setState({
    filterSearchText: text,
    data: newData,
});

到

this.setState({
    filterSearchText: text,
    data: newData,
}, () => {
    this.searchInput.focus();
});

它的作用是在调用 setState 后将焦点带回 searchInput

【讨论】：

谢谢@Raphael Estrada。它可以工作，但是当输入一个字符时，键盘会闪烁。即，它隐藏并重新出现。用户体验会变差