React Native Navigation Обновление данных

Я создаю приложение, в котором использую Redux и библиотеку React-Navigation. У меня есть список тренировок в FlatList:

<FlatList
    style={{ backgroundColor: colors.background }}
    data={this.props.workoutsList}
    renderItem={({ item }) =>
      <ListItem workout={item} onPress={() => this.props.navigation.navigate('Workout', item)} />
    }
    keyExtractor={(item) => item.id}
  />

Это показывает мой список правильно, и я могу переходить к конкретной странице тренировки для каждой строки, которую я нажимаю, и при каждом нажатии мне предоставляется прикрепленная тренировка. На этой конкретной странице тренировки у меня есть форма редактирования тренировки, где пользователи могут, например, обновить название и время тренировки.

Все это не проблема ... проблема у меня возникает, когда я нажимаю кнопку «Назад» в меню, которое возвращает меня к основному списку всех тренировок. FlatList все еще показывает старые данные и является источником моей проблемы. Он кэширует эти данные, поэтому мои новые сохранения не отображаются, и, как следствие, когда я снова нажимаю на элемент списка, он присоединяет старую информацию о тренировке, а не самую новую, которую я только что сохранил. (надеюсь, что это имеет смысл)

Я видел несколько похожий вопрос: React Navigation: как обновить заголовок навигации для родительского элемента, если значение исходит из redux и обновляется в дочернем?, но это не совсем отражает мой главный вопрос:

Возможно ли, чтобы FlatList мог обновлять определенную строку из настройки redux, сохраняя при этом ее положение прокрутки?

Я вижу, что это очень хорошо работает в приложении Facebook ... когда кто-то прокручивает свою Стену, допустим, он нажимает на элемент с надписью «xx Comments». Это переместит приложение на страницу, показывающую только этот пост. Вы можете поставить лайк / комментарий, и когда вы нажмете стрелку назад, вы вернетесь точно в то положение прокрутки стены, которое было раньше, И количество лайков / комментариев было обновлено, чтобы показать ваш вклад. Возможно ли это в React Native?

Если это невозможно ... кто-нибудь знает, как хотя бы обновить страницу при переходе с помощью кнопки возврата в React-Navigation?

ИЗМЕНИТЬ. Я готов использовать другую библиотеку навигации, если где-то еще есть более подходящие настройки!

ОБНОВЛЕНИЕ. Я попытался решить эту проблему несколькими способами. Один из способов, который я пробовал, заключался в следующем:

Когда я успешно сохранил форму, я отправил действие «NEEDS_REFRESHING». Это установило опору redux, которую я нашел на главной странице FlatList. На рендере этой страницы у меня было:

if (this.props.needsRefreshing) {
  console.log('Needs Refreshing');
  this.props.getWorkouts();
}

Я видел консоль, и моя страница FlatList обновлялась должным образом (она не возвращала меня к правильному положению прокрутки, поскольку она просто обновляла основной список) ... но я всегда получал предупреждение от React Native:

Невозможно обновить во время существующего перехода состояния (например, в render или в конструкторе другого компонента). Методы рендеринга должны полностью зависеть от свойств и состояния; побочные эффекты конструктора - это анти-шаблон, но их можно переместить в componentWillMount.

Когда я переместил это в componentWillMount, соответствующие обновления никогда не вызывались, и даже console.log в componentWillMount не отображался.


person Ridge Robinson    schedule 30.05.2017    source источник
comment
Какую отладку вы сделали? Вызывается ли вообще render при обновлении хранилища redux? Не могли бы вы предоставить код для своего действия / редуктора   -  person sooper    schedule 30.05.2017
comment
Привет @sooper ... спасибо за интерес. Я обновил свой вопрос, добавив дополнительную информацию!   -  person Ridge Robinson    schedule 30.05.2017


Ответы (1)


Вы пробовали метод scrollToIndex (params: object)? https://facebook.github.io/react-native/docs/flatlist.html#scrolltoindex

А также, если вы хотите обновить свои данные внутри flatList, вы должны добавить extraData в Props https://facebook.github.io/react-native/docs/flatlist.html#extradata.

Если вы используете goBack () для перехода к экрану, этот экран никогда не будет запускать componentWillMount, потому что этот экран никогда не отключается, поэтому используйте вместо этого redux.

person Tyreal Gray    schedule 09.06.2017