渲染时 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});
}

我已将状态设置为保留用户在搜索栏中输入的任何内容，因为它会在渲染时清除。这工作正常，除了每次组件重新渲染时键盘一直关闭（在用户输入/删除的每个字符上）。

为了解决这个问题，我尝试使用像这样的 refs 专注于输入

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

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

这是问题的 gif。

为了解决这个问题，我想将 TextInput 移动到一个单独的组件中（只有那个输入字段），然后将该组件添加到我的列表中。但是，我必须不断地将文本数据传回以过滤我的列表，从而增加了更多的复杂性。可能有更简单的解决方案吗？

Answer 1

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

价值

为文本输入显示的值。TextInput 是一个受控组件，>这意味着如果>提供，则本机值将被迫匹配此 value 属性。对于大多数用途，这效果很好，但在某些情况下，这可能会导致>闪烁 - 一个常见原因是通过保持值相同来阻止编辑。除了简单地设置相同的值之外，还可以设置 editable={false} 或设置/更新 maxLength 以防止不必要的编辑而不闪烁。

祝你好运！