使用Redux时React Native Textinput Flink

e0bqpujr 于 2023-06-30 发布在 React

关注(0)|答案(3)|浏览(111)

在我的react native应用中，包含多个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的值不会立即更新，因此当用户输入相对较快时，它会 Flink 。
有人能建议如何使文本输入得到更新更顺利？

redux

来源：https://stackoverflow.com/questions/62392489/react-native-textinput-flickers-when-using-redux

3条答案

按热度按时间

kx7yvsdv1#

经过一段时间的测试，我意识到这与onChangeText函数无关。我发现TextInput只有在其内容超过组件的初始宽度后才会 Flink 。因此，将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是屏幕中唯一的组件，则不会发生此问题，但仅当它嵌套在多个视图中时才会发生，就像这里的情况一样。但是，我不知道这个错误的直接原因是什么。

赞(0）回复(0）举报 2023-06-30

goqiplq22#

在渲染中，可以使用step（不相关，我知道），并将使用key，我会更改此设置