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

Posted 2023-04-18

【中文标题】渲染时 TextInput 闪烁/断断续续的行为

【英文标题】：TextInput flickering/choppy behaviour on render

【发布时间】：2017-09-04 01:17:04

【问题描述】：

我是 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();
    

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

Here's a gif of the issue.

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

【问题讨论】：

你解决过这个问题吗？我也遇到了同样的问题，不知道怎么解决！

请分享您的渲染函数的全部内容。看起来问题出在您的渲染器上

【参考方案1】：

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

价值

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

祝你好运！

【讨论】：

实际设置高度是解决问题的方法。但是如果你有多行它会变得复杂，如果我们只能设置固定高度，但输入的高度可以根据行数动态变化。

【参考方案2】：

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

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;

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