如何将数据从一个组件传递到导航器以及从导航器传递到组件

Question

我实际上是在做一个登录系统，登录用户时，登录组件必须将数据发送到我的主屏幕，但我真的不知道该怎么做。

实际上，当用户登录时我已经拥有了：

User.username = data.username;
User.id = responseJson.id;
User.token = responseJson.token;
this.props.navigation.navigate('Main', { User: User });

用户是保存所有内容并可以正常工作的地方。

将数据发送到Main，然后在AppContainer中导航：

export default createAppContainer(createSwitchNavigator(
    {
        Auth: { screen: AuthStack, navigationOptions: { tabBarVisible: false } },
        Main: { screen: MainStack },
    },
    {
        initialRouteName: "Auth"
    }),
);

所以它在Mainstack上运行，它是bottomTabNavigator，它的工作方式如下：

const MainStack = createBottomTabNavigator(
    {
        Services: {
            screen: Home,
            navigationOptions: {
                tabBarLabel:"Services",
                tabBarIcon: ({ tintColor }) => (
                    <Icon name="home" size={30} color="#0033CC" />
                )
            },
        },

我知道这还不完整，我还有其他屏幕，不仅是“服务”，只是想避免粘贴时功能太长。

那么有可能将此数据“用户”发送到我的主屏幕吗？ 我愿意接受任何建议或答案，这是我对Native项目的第一个反应，因此可能会有一些错误：）

Answer 1

您可能希望将用户数据保留在应用程序中（将其保存在存储中，以供用户离开应用程序然后进入并保持登录状态）。这就是为什么react-navigation具有switchNavigator（您正在使用的那个）的原因。为了保留数据，您可以使用AsyncStorage保存用户数据，并在开关导航器构造器中检查用户数据在存储中是否已经可用，然后决定是否导航到应用程序或身份验证页面。实际上，React Navigation就此提供了一个示例：https://reactnavigation.org/docs/en/auth-flow.html。由于您是RN的新手，这是管理数据的一条额外提示：您可以在仅适用于该特定组件的每个组件中使用State（这也是反应性的），可以使用在所有组件之间共享的全局数据（存储）。应用中的组件（检查react redux / flux / mobx），您可以通过在props中传递数据/功能（aka属性）将父组件中的数据共享给子组件，并且您可以使用新的React上下文api来使用提供程序（也类似于父级和子级组件之间共享的商店）

Answer 2

我做了一些可能更容易理解的事情：

我从外部api通过组件登录获取我的用户数据，并且运行良好。要从登录名转到家，我正在使用它：

this.props.navigation.navigate('Main', { User: User})

所以它继续在Main上，Main打开一个是bottomTabNavigator的Mainstack屏幕，如果我没有做任何错误，我发送的User数据在该Mainstack上，但我不知道如何获取和共享它到其他组件。 每个组件都有自己的js文件，同一文件中只有App容器和Authstack / Mainstack。

希望您能理解！