Question

我有一个使用Ignite CLI创建的react native应用程序。我正在尝试将TabNavigator与React Navigation一起使用，但似乎无法弄清楚如何将数据从一个屏幕传递到另一个屏幕。我所看到的所有示例都大体上显示了在点击按钮并使用onPress函数时如何传递数据，但是在我的情况下，当我实际上点击选项卡按钮之一时，我需要/想要传递数据。，但我还没有找到关于如何执行此操作的解释，至少我了解一个。

我有两个屏幕，用户将与SearchScreen和WatchScreen进行交互。这两个屏幕由AppNavigation.js文件中的TabNavigator控制。因此，共有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的形式通过导航道具，这将是我如何通过{{1} }排列到我的movies上？如果是这样，WatchScreen和this.props.navigation似乎并没有传递给我的WatchScreen。

Answer 1

发送数据

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

接收数据

  const item = this.props.navigation.getParam('item');

React Native（React Navigation）使用以下命令将数据从一个屏幕传递到另一个屏幕

1 个答案: