我正在嘗試使用 react-native 和 react-navigation 庫。我正在嘗試將引數傳遞給共享同一個 Tab Navigator 的多個螢屏。
這是風景：
應用程式.js
const MainScreen = ({ navigation }) => {
return (
<Button
onPress={() =>
navigation.navigate("User", { prop_i_want_to_share: "asd" })
} //This is the param I would like to share
/>
);
};
const UserInfoScreen = ({ route }) => (
<View>
{route.params.prop_i_want_to_share} // Here I would like to get the param used in navigation
</View>
);
const UserEditScreen = ({ route }) => (
<View>
{route.params.prop_i_want_to_share} // Here I would like to get the param used in navigation
</View>
);
const UserTab = () => (
<Tab.Navigator>
<Stack.Screen name="UserInfo" component={UserInfoScreen} />
<Stack.Screen name="UserEdit" component={UserEditScreen} />
</Tab.Navigator>
);
render() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Main" component={MainScreen} />
<Stack.Screen name="User" component={UserTab} />
</Stack.Navigator>
</NavigationContainer>
);
}
基本上，我正在嘗試傳播引數，但我認為我沒有正確設計導航器結構，這就是我發現這個問題的原因。你會改變什么來使這成為可能？
uj5u.com熱心網友回復：
我還沒有嘗試過，但是在最新的 v6 中，您可以使用Groups：
<Stack.Navigator>
<Stack.Group screenOptions={({ route, navigation }) => ({ prop_i_want_to_share: 'asd' })}>
{/* screens */}
</Stack.Group>
</Stack.Navigator>
uj5u.com熱心網友回復：
請參閱此相關問題的答案。
根據您使用的 react-navigation 版本（我假設是 6.x），要傳遞給您可以使用的嵌套導航器：
在主螢屏中
navigation.navigate('User', {
screen: 'UserInfo',
params: { prop_i_want_to_share: "asd" },
});
然后，您可以在導航到該引數后將其傳遞到下一個螢屏：
在用戶資訊螢屏中
navigation.navigate('User', {
screen: 'UserEdit',
params: { prop_i_want_to_share: route.params.prop_i_want_to_share },
});
但是，如果您嘗試更新全域變數，即在多個螢屏中使用的變數（例如：CurrentlyLoggedInUserId），您可能根本不想使用 params。您可以使用狀態管理工具，如 Recoil、Redux、React 的 useContext，甚至創建您自己的自定義鉤子。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/315557.html