React Native Textinput мерцает при использовании Redux

В моем собственном приложении React содержится несколько 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, и форма проверяется следующим образом:

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

Это означает, что значение TextInput не обновляется немедленно, поэтому, когда пользователь вводит относительно быстро, оно мерцает.

Может кто-нибудь подсказать, как сделать обновление ввода текста более плавным?


react-native reactjs javascript redux textinput
person M. Alex    schedule 15.06.2020    source источник
comment
Вы можете добавить закуски на выставке? и, в любом случае, перед изменением var steps = [...this.props.steps] вы должны создать неглубокую копию хранилища redux   -  person Hagai Harari    schedule 17.06.2020

Ответы (2)


arrow_upward
5
arrow_downward

После некоторого тестирования я понял, что это не имеет отношения к функции 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 был единственным компонентом на экране, а только тогда, когда он был вложен в несколько представлений, как здесь. Однако я понятия не имею, что является прямой причиной этой ошибки.

person M. Alex    schedule 18.06.2020
comment
чувак - спасибо, что вернулся, чтобы ответить на твой вопрос. Я немного застрял здесь и не хочу знать, сколько времени я бы потратил, прежде чем выяснил это - person MaxPower; 16.07.2021

arrow_upward
0
arrow_downward

При рендеринге можно было бы использовать step (неважно, я знаю) и key, я бы изменил это

value={this.props.steps[index]}

in

value={step}
key={index}

Как уже было сказано, в handleFieldChange вы плохо меняете props, это:

var steps = this.props.steps;

необходимо изменить в:

var steps = [...this.props.steps];

Более того, я не вижу доказательств того, почему handleFieldChange должна быть async функцией, я бы удалил async из ее объявления.

Наконец, корень проблемы может быть в updateSteps или _13 _...

Надеюсь это поможет.

person Daniele Ricci    schedule 17.06.2020