javascript - 渲染时 TextInput 闪烁/断断续续的行为

Question

我是 React Native 的新手，我一直在开发一个搜索栏，当用户在字段中输入内容时，该搜索栏会过滤列表。这就是它的样子...

<TextInput style={{width: '100%', textAlign: 'center'}}
  ref={(ref) => this.searchInput = ref}
  placeholder="Search"
  onChangeText={ (text) => this.onChangeText(text)}
  value={this.state.search} />

这是我用于此行为的 onChangeText 方法

onChangeText(text) {
    var filtered;

    this.setState({search: text});
    filtered = this.props.data.filter((item) => {
        if(item.section) {
          return true;
        }
        return (item.label.toLowerCase().includes(text.toLowerCase()));
    });

    this.setState({filteredList: filtered});
}

由于它在渲染时清除，我已将状态设置为保留用户在搜索栏中输入的任何内容。这工作得很好，除了每次组件重新渲染时(在用户输入/删除的每个字符上)键盘都会关闭。

为了尝试解决这个问题，我尝试使用像这样的引用来关注输入

componentDidUpdate() {
    if(this.searchInput) {
        this.searchInput.focus();
    }
}

但即便如此，键盘还是时不时地播放打开/关闭动画，并且不能顺利处理输入/删除。

Here's a gif of the issue .

为了解决这个问题，我正在考虑将 TextInput 移动到一个单独的组件中(仅包含该输入字段)，然后将该组件添加到我的列表中。但是，我必须不断地将文本数据传回以过滤我的列表，从而增加了复杂性。也许有更直接的解决方案吗？

Answer 1

我遇到了类似的问题，但我通过设置 textInput 宽度的数字解决了我的问题。我不确定这是否与此有关。但在我查看官方文档后，它说，

value

The value to show for the text input. TextInput is a controlled component, >which means the native value will be forced to match this value prop if >provided. For most uses, this works great, but in some cases this may cause >flickering - one common cause is preventing edits by keeping value the same. In >addition to simply setting the same value, either set editable={false}, or >set/update maxLength to prevent unwanted edits without flicker.

祝你好运!