React Native TextInput setState() 隐藏了键盘

Question

请检查小吃链接 https://snack.expo.io/@banid/textinput。 当我调用setState()更新TextInput的值时，筛选视图上的TextInput（按下按钮后显示）会隐藏键盘。由于这个问题，我不能在TextInput上连续输入。这是一个错误还是我的操作有误？谢谢。

- Banid Azin

---

我能在我的手机上打字。 - pritesh

我已经编辑了问题和代码片段，如果您不介意的话，可以再检查一遍吗？@pritesh - Banid Azin

是的，它正在发生。 - pritesh

你知道任何解决方法吗？ - Banid Azin

很奇怪，它不应该这样发生。 - pritesh

是的，这很奇怪，找不到任何解决方案，不知道该怎么办。 - Banid Azin

Answer 1

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

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

因此，它创建了一个新的TextInput而不是更新现有的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

---

谢谢@Haythem Farhat，现在它按预期工作了。 - Banid Azin

Answer 2

看起来在每次setState之后，焦点都被从TextInput中移除了，这里有一个可以使用的解决方法：

更改

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

到

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

这段代码的作用是在调用 setState 后将焦点返回到 searchInput。

- Raphael Estrada

---

谢谢@Raphael Estrada。它可以工作，但是当输入字符时，键盘会闪烁。也就是说，它会隐藏并重新出现。用户体验将变得很差。 - Banid Azin