我有以下代码,它为 2 个组件LoginList创建一个简单的堆栈导航器。 我在带有导航器( App.js )的文件中有一个useState挂钩,我想将 setter 和 getter 传递给每个屏幕。 我曾尝试在堆栈导航screenProps上使用screenProps ,但在记录传递给每个组件的 props 后,变量不会出现。

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>

#1楼 票数:2 已采纳

你需要使用 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-props-with-screenprops

  ask by Benjamin Sommer translate from so

未解决问题?本站智能推荐:

1回复

ImageBackground没有包装stack.navigator,并且stack.screens不可见。(@react-navigation/stack“:”^5.10.0)React-Native

我有多个具有相同背景的屏幕。 我想在导航文件本身中有 ImageBackground。 但不知何故,屏幕不可见。 这是代码 风格也包括这是行不通的。 Screen1 未显示,但背景已正确显示。 我还尝试将导航器的cardStyle设置为backgroundColor:"transparent" ,
2回复

无法下载@react-navigation/stack

当我尝试$npm install @react-navigation/stack它给了我一个错误: npm 错误! 可以在以下位置找到此运行的完整日志: npm 错误! C:\\Users\\SUJEET\\AppData\\Roaming\\npm-cache_logs\\2020-07-
1回复

@react-navigation/native和@react-navigation/stack读取整个堆栈

好的,所以我有我的 App.js<NavigationContainer> <Stack.Navigator initialRouteName="Home"> <Stack.Screen name="Home" component={HomeScreen} /&
2回复

ReactNative导航道具在单独的文件中不起作用

我尝试在单独的文件中创建一个带有 Auth 功能和导航的登录屏幕,但我总是在导航中遇到错误。 我试图传递道具,但它不起作用...... 你能帮帮我吗? 这是我的代码: 应用程序.js } 根堆栈.js 登录.js 认证.js 你能帮帮我吗? 哦对不起,我忘了添加错误消息:未定义不是对象(评估'pr
1回复

将手势/滑动设置为false不起作用[react-navigationv5]

在我的本机应用程序中,我希望在某些屏幕上禁用抽屉。 所有屏幕都是 Stack 并传递给drawerNavigation 。 将这两个屏幕的navigationOptions指定为gestureEnabled或swipeEnabled为false ,仍然通过滑动抽屉打开 在屏幕上定义导航选项也不起作
2回复

如何在react-navigation中将header移到stackNavigator的底部?

我正在使用react-navigation 。 我想要createStackNavigator样式导航,但我只希望标题位于屏幕底部而不是顶部。 似乎在不制作自己的导航器的情况下获得底部导航栏的唯一方法是使用createBottomTabNavigator 。 我正在制作一个流程,一个屏幕接一个,直到
1回复

如何在react-navigation中将通用背景图像添加到stackNavigator中的所有屏幕?

我有一个react-native应用程序,类似于react-navigation中描述的身份验证流程 。 我想在AppStack的所有屏幕中添加通用背景图像。 我尝试过的事情 我尝试将AppStack导航器包装在<ImageBackground/>然后以某种方式始终将屏幕
1回复

在没有导航道具的情况下反应导航导航不起作用

我有一个本机应用程序,正在使用新的上下文API来管理存储和内容,现在我将createAppContainer(AuthNavigator)包装在由上下文api创建的<Provider> ,以便从Context API文件,我尝试通过创建NavigationService并将AppCo