反应导航-堆栈.导航屏幕道具不工作



我有以下代码,它为两个组件LoginList创建了一个简单的堆栈导航器。我在带有导航器(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-道具与屏幕道具

相关内容

  • 没有找到相关文章

最新更新