Javascript text渲染时输入闪烁/起伏行为

我对React Native还不熟悉，我一直在开发一个搜索栏，当用户输入字段时，它会过滤列表。这就是它看起来的样子

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

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

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

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

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

---

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

我也有类似的问题，但我通过设置textInput的宽度来解决问题。我不确定这是否与此有关。但我查过官方文件后，上面说

价值观

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

---

祝你好运

这个问题的一个优雅解决方案是在输入文本时不要不断更新组件的状态，而是在提交时更新组件的状态：

import React from 'react';
import { View } from 'react-native';

const MyComponent = () => {
    let textValue;

    function onFormSubmitted() {
        // do something with textValue, update state
    }

    return (
        <View>
            <TextInput
                onChangeText={(text) => {
                    textValue = text;
                }}
                onEndEditing={onFormSubmitted}
            />
        </View>
    );
};

export default MyComponent;

从“React”导入React；
从“react native”导入{View}；
常量MyComponent=（）=>{
让文本值；
函数onFormSubmitted（）{
//使用textValue、更新状态执行某些操作
}
返回(
{
textValue=文本；
}}
onEndEditing={onFormSubmitted}
/>
);
};
导出默认MyComponent；

---

闪烁的原因似乎与组件的大小有关，持续更新状态可能在小组件中起作用，但本质上是浪费。如果您不依赖于对某些内容的实时过滤，那么它应该是完全不必要的。

您解决过这个问题吗？我遇到了同样的问题，不知道如何解决它！请分享渲染函数的全部内容。看起来问题出在渲染器上

import React from 'react';
import { View } from 'react-native';

const MyComponent = () => {
    let textValue;

    function onFormSubmitted() {
        // do something with textValue, update state
    }

    return (
        <View>
            <TextInput
                onChangeText={(text) => {
                    textValue = text;
                }}
                onEndEditing={onFormSubmitted}
            />
        </View>
    );
};

export default MyComponent;