如何在 React Native 中导航到 class 组件中的另一个屏幕

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>
  );
}

导出默认App函数有以下代码：

<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("个人资料");

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

Answer 1

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

现在如果我得到你的问题，你想在所有组件中访问它，无论它是否是路由。您可以通过从作为路由的组件向其传递道具来做到这一点。

例如，

让 main 成为一条路线，child 成为另一个组件但不是路线。

内主；

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

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

里面child;

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

Answer 2

如果我们应该从第一个堆栈导航器的屏幕导航到另一个导航器，那么我们必须访问第一个导航器屏幕的父级，这意味着我们必须获得第一个堆栈导航器的导航道具作为我们已经创建了一个基于多个屏幕的抽屉。

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

如果使用 Class 组件：

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

如果使用功能组件：

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

如何在 React Native 中导航到 class 组件中的另一个屏幕

How to navigate to a another screen in class component in react native

react-native

react-navigation