0

我正在努力将令牌从一个 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 或类似的东西传递它。

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

4

2 回答 2

0

好的，我发现在我的情况下似乎是最好的解决方案： 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（如果我可以这样调用），然后导航到 Map 屏幕（位于子 Tab.Navigator 上）。无论如何，这只是我使用 React Navigation 5 的项目复杂性。:)

设置令牌后，您可以以相同的方式在其他组件中访问它：

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

....

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

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

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

于 2020-11-20T10:24:07.753 回答
0

您可以将数据存储在 Context 中并获取它。或者你可以通过 navigate("Route",{param}) 传递数据并通过 route.param 在其他类中获取它。或者您可以将数据作为道具发送。

于 2020-11-20T07:32:39.077 回答