我有以下代码,它为两个组件Login
和List
创建了一个简单的堆栈导航器。我在带有导航器(App.js
(的文件中有一个useState
挂钩,我想将setter和getter传递到每个屏幕。我曾尝试在堆栈导航器上使用screenProps
,但在记录了传递给每个组件的道具后,变量就不会出现了。
TL;DR我需要将道具从Stack.Navigator
传递到每个屏幕
<NavigationContainer>
<Stack.Navigator screenProps={{setVariable, variable}}>
<Stack.Screen
name="Login"
component={Login}
options={navOptions}
/>
<Stack.Screen
name="List"
component={List}
options={navOptions}
/>
</Stack.Navigator>
</NavigationContainer>
您需要使用React的上下文API
// MyContext.js
export const MyContext = React.createContext();
// App.js
const context = React.useMemo(() => ({
setVariable,
variable
}), [variable]);
return (
<MyContext.Provider value={context}>
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Login"
component={Login}
options={navOptions}
/>
<Stack.Screen
name="List"
component={List}
options={navOptions}
/>
</Stack.Navigator>
</NavigationContainer>
</MyContext.Provider>
);
// Home.js
const variable = React.useContext(MyContext);
https://reactnavigation.org/docs/en/upgrading-from-4.x.html#global-道具与屏幕道具