React Navigation - 如何在 TabNavigator 中跨不同屏幕传递数据? [英] React Navigation - How to pass data across different screens in TabNavigator?
问题描述
我有一个 TabNavigator,每个选项卡中都有一个 StackNavigator.在 StackNavigator 中,我有屏幕.每个 Tab 中的屏幕不直接相互调用;TabNavigator 处理按下选项卡时的屏幕变化.
I have a TabNavigator, and in each tab is a StackNavigator. Inside the StackNavigator, I have screens. The screens in each Tab do not call each other directly; the TabNavigator handles the screen changes when a tab is pressed.
在第一个选项卡中,如果用户单击按钮,则会创建一些数据.如果用户随后导航到第二个 Tab,我想将此数据传递到第二个 Tab 中的屏幕.
In the first tab, if the user clicks a button, some data is created. If the user then navigates to the second Tab, I would like to pass this data to the screen in the second Tab.
这是代码的演示:
import React from 'react';
import { Button, Text, View } from 'react-native';
import {
createBottomTabNavigator,
createStackNavigator,
} from 'react-navigation';
class HomeScreen extends React.Component {
doIt = () => {
this.props.navigation.setParams({results: ['one', 'two']}); // <--- set data when user clicks button.
}
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
{/* other code from before here */}
<Button
title="Set Results"
onPress={this.doIt}
/>
</View>
);
}
}
class SettingsScreen extends React.Component {
render() {
console.log(this.props.navigation); // <--- console out when user clicks on this tab
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Settings</Text>
</View>
);
}
}
const HomeStack = createStackNavigator({
Home: HomeScreen,
});
const SettingsStack = createStackNavigator({
Settings: SettingsScreen,
});
export default createBottomTabNavigator(
{
Home: HomeStack,
Settings: SettingsStack,
},
{
}
);
this.props.navigation.state.params
永远不会在第二个 Tab 中获取数据 results
.它甚至没有密钥,所以如果我尝试访问 this.props.navigation.state.params.results
,它将是未定义的.
The this.props.navigation.state.params
never gets the data results
in the second Tab. There isn't even a key for it, so if I try to access this.props.navigation.state.params.results
, it will be undefined.
这令人困惑,因为我认为 props.navigation
是 自动传递到所有屏幕.
This is confusing because I thought props.navigation
is passed to all screens automatically.
如何仅使用 react-navigation 通过 TabNavigator 将数据从一个屏幕传递到另一个屏幕?我已经看到说使用 Redux 的答案,但如果我只想在不同的 React 导航器中跨屏幕保持一些状态,我不想导入另一个库.
How can I pass data from one screen to another through the TabNavigator, using just react-navigation? I have seen answers that say to use Redux, but I would not like to import another library if all I want is to keep some state across screens in different react navigators.
推荐答案
在跨不同选项卡传递数据时设置道具不起作用.我什至尝试使用 AsyncStorage,尝试在不同的选项卡中保存和检索它们.
Setting props did not work when passing data across different tabs. I even tried playing with AsyncStorage, trying to save and retrieve them in different tabs.
我最终使用 Redux 来保存我的状态,到目前为止效果很好.
I ended up using Redux to save my states, and that has worked well so far.
这篇关于React Navigation - 如何在 TabNavigator 中跨不同屏幕传递数据?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!