gpt4 book ai didi

react-native - React Native (React Navigation) 将数据从一个屏幕传递到另一个使用

转载 作者:行者123 更新时间:2023-12-05 00:47:38 28 4
gpt4 key购买 nike

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

我有两个用户将与之交互的屏幕 SearchScreenWatchScreen .这两个屏幕由 AppNavigation.js 中的 TabNavigator 控制。文件。所以一共有3个文件AppNavigation.js , SearchScreen.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 中可用。以及。通常我会将数据作为 Prop 传递给 WatchScreen,但是使用 TabNavigator 我看不出如何做到这一点,因为它不是 SearchScreen 的 child .在`SearchScreen 中,相关的部分是这个
constructor(props){
super(props)
this.state = { movies: []}
}
this.state.movies是我需要在我的 WatchScreen 中可用的东西,我怎样才能使它在我点击 Watch 时可用标签栏中的按钮?

我读过的内容表明每个 Screen组件以 this.props.navigation 的形式传递导航 Prop 或 this.props.screenProps ,这会是我通过 movies 的方式吗?数组到我的 WatchScreen ?如果是这样, this.props.navigation & this.props.screenProps似乎没有传递到我的 WatchScreen。

最佳答案

发送数据

 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 Native (React Navigation) 将数据从一个屏幕传递到另一个使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51470536/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com