使用 Redux 时 React Native Textinput 闪烁

Question

在我的本机应用程序中，包含多个 TextInputs 用于呈现如下形式的表单：

{this.props.steps.map(step, index) => (
  <TextInput
    multiline={true}
    value={this.props.steps[index]}
    placeholder="Enter Step"
    onChangeText={value => this.handleFieldChange(value, index)}
    style={{ padding: 10, fontSize: 15 }}
  />
)}

在该onChangeText函数中，使用 redux 编辑 textinput 的值，并验证表单如下：

handleFieldChange = async (value, index) => {
  var steps = this.props.steps;
  steps[index]= value;
  store.dispatch(updateSteps({ steps: steps }));
  this.validateForm();
};

这意味着 TextInput 的值不会立即更新，因此当用户输入相对较快时，它会闪烁。

有人可以建议如何使文本输入更顺畅地更新吗？

Answer 1

经过一段时间的测试，我意识到这与onChangeText函数无关。我发现 TextInput 只有在其内容超过组件的初始宽度后才会闪烁。因此，使 TextInput 成为屏幕的整个宽度textAlign并将输入添加到中心解决了这个问题。

var width = Dimensions.get("window").width

<TextInput
  multiline={true}
  value={this.props.steps[index]}
  placeholder="Enter Step"
  onChangeText={value => this.handleFieldChange(value, index)}
  style={{ width: width, padding: 10, fontSize: 15, textAlign: "center" }}
/>

如果 TextInput 是屏幕中的唯一组件，则不会发生此问题，但仅当它嵌套在多个视图中时才会发生，就像这里的情况一样。但是，我不知道此错误的直接原因是什么。