pda*_*d04 4 react-native react-navigation react-native-tabnavigator
我有一个使用Ignite CLI. 我正在尝试将 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
Run Code Online (Sandbox Code Playgroud)
在SearchScreen将获取一些数据,并保持在一个数组,我需要在现有的WatchScreen为好。通常我会将数据作为道具传递给 WatchScreen,但是使用 TabNavigator 我看不出如何做到这一点,因为它不是SearchScreen. 在`SearchScreen 中,相关的部分是这个
constructor(props){
super(props)
this.state = { movies: []}
}
Run Code Online (Sandbox Code Playgroud)
this.state.movies是我需要在我的WatchScreen,我怎样才能使它在我点击Watch标签栏中的按钮时可用?
事情我已经阅读表明,每一个Screen组件获取的任何形式通过导航道具this.props.navigation或者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
}
)}
Run Code Online (Sandbox Code Playgroud)
接收数据
const item = this.props.navigation.getParam('item');
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
3671 次 |
| 最近记录: |