React Navigation 5 Tab.Navigator 在 Tab.Screens 之间发送令牌

Posted 2023-02-19

【中文标题】React Navigation 5 Tab.Navigator 在 Tab.Screens 之间发送令牌

【英文标题】：React Navigation 5 Tab.Navigator sending token between Tab.Screens

【发布时间】：2021-03-02 23:37:05

【问题描述】：

我正在努力将令牌从一个 Tab.Screen 传递到另一个 Tab.screen

我在 Stack.Navigator 中使用 Tab.Navigator

<Stack.Screen name="Auth"/> 组件导航到<Tab.Screen name="Map"/> 并在那里发送令牌：

props.navigation.replace("BottomTabs", screen: "Map", params: token: token);

到目前为止一切都很好，但现在我有两个标签 <Tab.Screen name="Map"/> 和 <Tab.Screen name="List"/>。我需要通过按导航选项卡将令牌从地图组件传递到列表组件。我不能像以前那样使用 props.navigation.replace/navigate 或类似的东西传递它。

也许有人可以帮助我找到一种在一个标签屏幕之间传递数据到另一个标签屏幕的正确方法？谢谢！

【问题讨论】：

将您的令牌存储在全局存储中，而不是发送参数。它就像一个全局状态，而不是屏幕的参数 (reactnavigation.org/docs/params#what-should-be-in-params)。无论如何，您可能几乎在任何地方都需要令牌，在参数中传递它非常不方便。

【参考方案1】：

U 可以将数据存储在 Context 中并获取它。或者你可以通过导航（“Route”，param）传递数据并通过route.param在其他类中获取它。或者你可以发送数据作为道具。

【参考方案2】：

好的，我找到了对我来说最好的解决方案： https://dev.to/efearas/how-to-usecontext-and-set-value-of-context-in-child-components-in-3-steps-3j9h

我创建上下文文件auth-context.js:

import React from 'react';

export const AuthContext = React.createContext();

我在App.js 中创建了令牌钩子并将其包装成这样：

import  AuthContext  from "./auth-context.js";

function AppNavigator() 
  const [token, setToken] = useState(null);
  return (
    <AuthContext.Provider value=[token, setToken]>
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Auth">
          <Stack.Screen
            name="BottomTabs"
            component=BottomTabs // this separate navigator has my map and list components and they also get token in this way
          />
          <Stack.Screen
            name="Auth"
            component=Auth
          />
          <Stack.Screen
            // other components which I don't want to have in BottomTabs
          />
        </Stack.Navigator>
      </NavigationContainer>
    </AuthContext.Provider>

在我的auth.js 组件中，我setToken：

import  AuthContext  from "../auth-context.js";

export default function Auth(props) 

    const [token, setToken] = useContext(AuthContext);

    useEffect(() => 
        (async () => 
            const token = await AsyncStorage.getItem('token')
            if (token)
                setToken(token);
                props.navigation.replace("BottomTabs", screen: "Map");
        )()
    , []);

例如，在这里，它尝试从 AsyncStorage 获取令牌，如果确实如此，则将其设置为 Context Hook（如果我可以这样调用），然后导航到地图屏幕（位于子 Tab.Navigator 上） .无论如何，这只是我使用 React Navigation 5 的项目复杂性。:)

设置token后，可以在其他组件中以同样的方式访问它：

import  AuthContext  from "../auth-context.js";

....

const [token, setToken] = useContext(AuthContext);

免责声明：我远非专家，所以我的解决方案可能不是最漂亮的，但它对我有用，我希望我的挣扎的答案也能帮助其他人:)。

如果有人看到可以做得更好，请添加您的答案。谢谢大家！