【问题标题】:React Native (React Navigation) Passing data from one screen to another usingReact Native(React Navigation)使用将数据从一个屏幕传递到另一个屏幕
【发布时间】:2018-12-30 10:02:21
【问题描述】:

我有一个使用 Ignite CLI 创建的 react 本机应用程序。我正在尝试将 TabNavigator 与 React Navigation 一起使用,但我似乎无法弄清楚如何将数据从一个屏幕传递到另一个屏幕。我见过的所有示例通常都显示了如何在点击按钮并使用 onPress 函数时传递数据,但在我的情况下,当我实际点击其中一个选项卡按钮时,我需要/想要传递数据,并且我还没有找到关于如何做到这一点的解释,至少我理解的一个。

我有两个屏幕,用户将与SearchScreenWatchScreen 进行交互。这两个屏幕由 AppNavigation.js 文件中的 TabNavigator 控制。所以一共有3个文件AppNavigation.jsSearchScreen.jsWatchScreen.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.navigationthis.props.screenProps 的形式传递导航道具,这就是我将movies 数组传递给我的WatchScreen 的方式吗?如果是这样,this.props.navigationthis.props.screenProps 似乎不会被传递到我的 WatchScreen。

【问题讨论】:

  • 你可能需要使用 redux ,没有其他解决方案

标签: react-native react-navigation react-native-tabnavigator


【解决方案1】:

发送数据

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

接收数据

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

【讨论】:

  • 感谢您的输入,但 onPress 道具适用于 <Button> 组件,我遇到的问题是我没有使用 <Button> 组件来更改选项卡,我使用的是实际的“按钮”标签栏创建,据我所知,它不采用onPress 道具。现在我刚刚在window 对象上创建了一个属性,这样我就可以在我的第二个选项卡/屏幕中访问我需要的内容。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-01-18
  • 2020-11-14
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多