如何在本机反应中导航到类组件中的另一个屏幕答案

【问题标题】：How to navigate to a another screen in class component in react native如何在本机反应中导航到类组件中的另一个屏幕
【发布时间】：2021-02-04 13:03:13
【问题描述】：

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("Profile");

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

【问题讨论】：

从你应该去的地方配置文件，我的意思是你想从哪个屏幕导航到配置文件导航堆栈？
假设我在浏览屏幕上，现在想转到个人资料屏幕。

标签： react-native react-navigation

【解决方案1】：

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

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

如果使用类组件：

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

如果使用功能组件：

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

【讨论】：

【解决方案2】：

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

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

例如，

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

主内;

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

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

child里面;

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

【讨论】：