Как передать параметры с предыдущего экрана на мой текущий экран в React Navigation? - PullRequest
Новая
       4

Как передать параметры с предыдущего экрана на мой текущий экран в React Navigation?

1 голос
/ 05 марта 2020

На экране A есть значение для отслеживания загрузки мутации GraphQL. Я хочу передать это значение загрузки на экран B. Моя проблема заключается в том, что, когда я пытаюсь передать это значение в качестве параметра на экран B, используя navigation.navigate(ScreenB, { loading }), значение загрузки не обновляется - оно всегда остается таким же, каким было значение при момент, когда навигация. навигация была вызвана.

Я знаю, что setParams обновляет параметр для данного маршрута, но, похоже, он не применим к моему случаю использования, поскольку он не изменяет параметр между маршрутами. Есть ли способ, которым предыдущий экран мог динамически установить параметр, чтобы я мог восстановить измененное значение, находясь на текущем экране? 

const ScreenA = (props) => {
  const { data, loading } = useQuery(QUERY);

  (
    <View>
      <Button onPress={() => navigation.navigate(ScreenB, { loading } }/>
    </View>
  )
}

const ScreenB = (props) => {
  const screenALoading = navigation.getParam('loading');

  return (
    <Text>{loading}</Text>
  )
}

Ответы [ 2 ]

1 голос
/ 05 марта 2020

Возможно, вы захотите добавить какой-либо тип глобального состояния в ваше приложение, поскольку это решает эту проблему, и, по мере того, как ваше приложение становится больше, вы можете захотеть добавить его в будущем в любом случае. Я считаю Redux лучшим, но вы можете использовать Context и реагировать на хуки, чтобы создать свой собственный. После этого вы можете просто установить состояние из предыдущего экрана и прочитать его в текущем.

0 голосов
/ 10 марта 2020

ответ Гиотсхады имеет большой смысл. Redux - очень полезный способ решения этой проблемы путем сохранения глобального состояния, и такая проблема является хорошим примером того, как Redux предоставляет полезное дополнение к Apollo.

При этом я не хотел настраивать Redux для одной маленькой вещи, поэтому я продолжил работать над этой проблемой и нашел способ решить эту проблему, не добавляя избыточности для тех, кто заинтересован.

Чтобы обновить загрузку на экране B после переключения с экрана A, я снова вызываю navigation.navigate с обновленным значением, но только после переключения на ScreenB. 

const [navigatedToScreenB, toggleNavigatedToScreenB] = useState<boolean>(false);

useEffect(() => {
  if(navigatedToScreenB) {
   navigation.navigate(ScreenB, { loading });
  }
}, [loading])

Поскольку я хочу выполнять дальнейшую навигацию к ScreenB, при загрузке изменений важно добавить loading в качестве зависимости useEffect.

И в функции onPress переключать на ScreenB я делаю: 

onPress={() => 
  {
    toggleNavigatedToScreenB(true);
    navigation.navigate(ScreenB, { toggleNavigatedToScreenB });
  }
}

Передав toggleNavigatedToScreenB на ScreenB, я могу предупредить ScreenA о том, что я больше не на экране B, чтобы остановить навигацию при загрузке изменений. Если бы я должен был изменить экран чтобы прекратить переход к ScreenB.Таким образом, например, в кнопку «Назад» ScreenB, я бы добавил: 

onPress={() => 
  {
    toggleNavigatedToScreenB(false);
    navigation.goBack();
  }
}

Я признаю, что это гораздо более замысловато, чем Redux, но я заставил его работать, поэтому я хотел бы поделиться этим решением для тех, у кого такая же проблема.

...