Question

App.js 代码：

function firstScreenStack({ navigation }) {
  return (
      <Stack.Navigator initialRouteName="Login">
        <Stack.Screen
          name="Login"
          component={Login}
          options={{
            title: 'Login', //Set Header Title
            headerLeft: ()=>
              <NavigationDrawerStructure
                navigationProps={navigation}
              />,
            headerStyle: {
              backgroundColor: '#CA2C68', //Set Header color
            },
            headerTintColor: '#fff', //Set Header text color
            headerTitleStyle: {
              fontWeight: 'bold', //Set Header text style
            },
          }}
        />
      </Stack.Navigator>
  );
}

function secondScreenStack({ navigation }) {
  return (
    <Stack.Navigator
      initialRouteName="Browse"
      screenOptions={{
        headerLeft: ()=>
          <NavigationDrawerStructure
            navigationProps={navigation}
          />,
        headerStyle: {
          backgroundColor: '#CA2C68', //Set Header color
        },
        headerTintColor: '#fff', //Set Header text color
        headerTitleStyle: {
          fontWeight: 'bold', //Set Header text style
        }
      }}>
      <Stack.Screen
        name="Browse"
        component={Browse}
        options={{
          title: 'Browse', //Set Header Title
          
        }}/>
      <Stack.Screen
        name="Profile"
        component={Profile}
        options={{
          title: 'Profile', //Set Header Title
        }}/>
    </Stack.Navigator>
  );
}

导出默认应用功能有以下代码：

<NavigationContainer>
        <Drawer.Navigator
        initialRouteName = {Login}
          drawerContentOptions={{
            activeTintColor: '#CA2C68',
            itemStyle: { marginVertical: 5 },
          }}>
          <Drawer.Screen
            name="Login"
            options={{ drawerLabel: 'Login' }}
            component={firstScreenStack} />
          <Drawer.Screen
            name="Browse"
            options={{ drawerLabel: 'Browse' }}
            component={secondScreenStack} />
            <Drawer.Screen
            
            name="Profile"
            options={{ drawerLabel: 'Profile' }}
            component={profileScreenStack} />
        </Drawer.Navigator>
      </NavigationContainer>

我同时使用堆栈和抽屉导航。

我想要 navigation.navigate("Profile");

现在如何将导航道具添加到我的类组件中？我是本机和导航方面的新手。对我来说理解起来有点复杂。如果你能帮我一下就更好了。谢谢。

Answer 1

Navigation 仅可在堆栈路由中访问，即在不同导航器中用作路由的那些类或组件。

现在，如果我收到您的问题，您想在所有组件中访问它，而不管它是否是路由。你可以通过从一个路由组件传递 props 来实现。

例如

让 main 为路由，child 为另一个组件但不是路由。

里面主要;

<child new_navigation={this.props.navigation} />

现在您可以访问 new_navigation 中的 child。

在child内部；

this.props.new_navigation.navigate('some_route') //您现在可以使用所有其他方法，例如推送、替换等

Answer 2

如果我们应该从第一个堆栈导航器的屏幕导航到另一个导航器，那么我们必须访问第一个导航器屏幕的父级，这意味着我们必须像我们一样获取第一个堆栈导航器的导航属性创建了一个基于多个屏幕的抽屉。

狐狸前。如果您想从 firstScreenStack 的浏览屏幕导航到另一个抽屉屏幕导航器，请尝试使用以下代码：

如果使用类组件：

this.props.navigation.dangerouslyGetParent()?.navigate("<<ANOTHER_DRAWER_SCREEN>>")

如果使用功能组件：

props.navigation.dangerouslyGetParent()?.navigate("<<ANOTHER_DRAWER_SCREEN>>")

如何导航到本机类组件中的另一个屏幕

2 个答案: