React Native (React Navigation) Передача данных с одного экрана на другой с помощью

У меня есть собственное приложение для реагирования, которое я создал с помощью Ignite CLI. Я пытаюсь использовать TabNavigator с React Navigation, но не могу понять, как передавать данные с одного экрана на другой. Все примеры, которые я видел, обычно показывают, как передавать данные при нажатии кнопки и использовании функции onPress, но в моем случае мне нужно / хочу передать данные, когда я действительно нажимаю одну из кнопок вкладки, и у меня есть пока не нашел объяснения, как это сделать, хотя бы одно, которое я понимаю.

У меня есть два экрана, с которыми пользователь будет взаимодействовать SearchScreen и WatchScreen. Два экрана контролируются TabNavigator, который находится в файле AppNavigation.js. Итак, всего 3 файла AppNavigation.js, SearchScreen.js и WatchScreen.js.

AppNavigation.js

import { StackNavigator,TabNavigator } from 'react-navigation'
import SearchScreen from '../Containers/SearchScreen'
import WatchScreen from '../Containers/WatchScreen'
import SearchWatch from '../Containers/SearchWatch'
import LaunchScreen from '../Containers/LaunchScreen'
import styles from './Styles/NavigationStyles'

const PrimaryNav = TabNavigator({
  Search: { screen: SearchScreen },
  Watch: { screen: WatchScreen }
}, {
  initialRouteName: 'Search',
  lazy: true,

})
export default PrimaryNav

SearchScreen будет извлекать некоторые данные и хранить их в массиве, который мне также должен быть доступен в WatchScreen. Обычно я передаю данные в WatchScreen в качестве опоры, но, используя TabNavigator, я не вижу, как это сделать, поскольку это не дочерний элемент SearchScreen. В SearchScreen соответствующая часть - это

constructor(props){
  super(props)
  this.state = { movies: []}
}

this.state.movies - это то, что мне нужно, чтобы быть доступным в моем WatchScreen, как я могу сделать его доступным, когда я нажимаю кнопку Watch на панели вкладок?

То, что я прочитал, указывает на то, что каждому Screen Компоненту передаются свойства навигации в форме this.props.navigation или this.props.screenProps. Мог бы я таким образом передать массив movies в свой WatchScreen? Если это так, this.props.navigation & this.props.screenProps, похоже, не передаются на мой WatchScreen.


react-native react-navigation react-native-tabnavigator
person pdad04    schedule 23.07.2018    source источник
comment
Возможно, вам придется использовать redux, другого решения нет   -  person Paras Watts    schedule 23.07.2018

Ответы (1)


arrow_upward
6
arrow_downward

Отправка данных

 onPress={() => this.props.navigation.navigate(
                SCREEN_NAME,
                {
                    item: YOUR_DATA_WHAT_YOU_NEDD_TO_SEND
                }
            )}

Получение данных

  const item = this.props.navigation.getParam('item');
person Jay Thummar    schedule 25.07.2018
comment
Спасибо за ввод, но опора onPress работает с компонентом <Button>, проблема в том, что я не использую компонент <Button> для изменения вкладок, я использую фактическую кнопку, которую создает панель вкладок, которая, насколько я могу судить, не принимает onPress опора. На данный момент я только что создал свойство для объекта window, чтобы я мог получить доступ к тому, что мне нужно, на моей второй вкладке / экране. - person pdad04; 26.07.2018