我很难将令牌从一个选项卡屏幕传递到另一个选项卡页面
我在Stack中使用Tab导航器。导航
<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"/>
。我需要通过按导航选项卡将令牌从Map组件传递到List组件。我不能像以前那样使用props.navigation.replacenavigation或类似的东西传递令牌。
也许有人可以帮我找到一种在一个选项卡屏幕之间传递数据的正确方法?谢谢
好吧,我找到了在我的情况下最好的解决方案: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
组件中,IsetToken
:
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屏幕(位于子选项卡导航器上(。无论如何,这只是我使用React Navigation 5的项目复杂性。:(
设置令牌后,您可以以相同的方式在其他组件中访问它:
import { AuthContext } from "../auth-context.js";
....
const [token, setToken] = useContext(AuthContext);
免责声明:我远非专家,所以我的解决方案可能不是最漂亮的,但它对我有效,我希望我的挣扎的答案也能帮助其他人:(。
如果有人认为可以做得更好,请添加您的答案。谢谢大家!
U可以将数据存储在Context中并获取它。或者U可以通过导航("Route",{param}(传递数据并通过Route.param在其他类中获取数据。或者U也可以将数据作为道具发送。