Как передать состояние от одного реагирующего родного экрана к другому

Question

У меня есть два независимых экрана

1. Экран входа в систему
2. Панель инструментов

Теперь на экране входа в систему я сохраняю запрошенные данные API внутри состояния (this.state.data) и сохраненные данные, которые я хочу показать на экране панели инструментов, например, имя, возраст, страну или что-то еще.Теперь, как мне синхронизировать оба эти экрана, я использую React Navigation 2.0

Answer 1

Если вы делаете небольшой проект, вы можете сделать это с помощью реквизита, как объяснено @ Aseem Upadhyay

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

Идеальный способ сделать это - через редукс.С его помощью вы создаете общее хранилище переменных, так что вы можете получить к ним доступ в любом месте приложения.Следующая ссылка демонстрирует, как настроить Redux в вашем проекте.https://blog.cloudboost.io/getting-started-with-react-native-and-redux-6cd4addeb29

Рекомендуется использовать приставку для переменных, которые должны использоваться совместно.Если у вас есть только локальные переменные компонента, вам не нужно их использовать.

Надеюсь, это поможет вам в ваших проектах.

Объятия!

Answer 2

При успешном выполнении запроса на вход в систему вам необходимо изменить текущий компонент на компонент Dashboard, что -

Может быть сделано двумя способами

1. Если вы заменяете компонентзатем вы можете позвонить <Dashboard data={this.state.data} /> и извлечь его на экране Dashboard как this.props.data
2. Если вы переходите к компоненту, вы можете сделать это через this.props.navigation.navigate('Dashboard', { data: this.state.data });, а затем в компоненте Dashboard вы можете получить егочерез this.props.navigation.state.params.data

Надеюсь, это поможет:)