从嵌套选项卡导航器（嵌套导航）导航父路由器的最佳方式答案

【问题标题】：Best way to navigate parent router from nested Tab Navigator (Nested Navigation)从嵌套选项卡导航器（嵌套导航）导航父路由器的最佳方式
【发布时间】：2021-03-11 03:17:02
【问题描述】：

我正在使用 React Navigation 5.x，我有这样的导航堆栈。

function Home() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Feed" component={Feed} />
      <Tab.Screen name="Messages" component={Messages} />
    </Tab.Navigator>
  );
}

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={Home} />
         <Stack.Navigator>
          <Stack.Screen name="Profile" component={Profile} />
          <Stack.Screen name="Settings" component={Settings} />
         <Stack.Navigator>
         <Stack.Navigator>
          <Stack.Screen name="OtherScreen1" component={OtherScreen1} />
          <Stack.Screen name="OtherScreen2" component={OtherScreen2} />
         <Stack.Navigator>
      </Stack.Navigator>
    </NavigationContainer>
  );
}

现在我需要将 Feed 屏幕导航到 OtherScreen1。我希望我可能有最好的解决方案。谢谢，

【问题讨论】：

标签： react-native react-native-navigation react-navigation-v5

【解决方案1】：

我放弃了 2 个选项。首先你回答你的问题。长篇文章展示了如何使用 React Navigation 进行良好实践。

简答

navigation.navigate('OtherScreens', { screen: 'OtherScreen1' });

长答案https://snack.expo.io/@anthowm/navigators

function Feed() {
  const navigation = useNavigation();
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Feed!</Text>
      <Button onPress={() => {navigation.navigate('OtherScreens', { screen: 'OtherScreen1' });}} title='press'></Button>
    </View>
  );
}

function Messages() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Messages!</Text>
    </View>
  );
}

function Profile() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Profile!</Text>
    </View>
  );
}

function Settings() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}

function OtherScreen1() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>OtherScreen1!</Text>
    </View>
  );
}

function OtherScreen2() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>OtherScreen2!</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();

const Stack = createStackNavigator();

function Home() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Feed" component={Feed} />
      <Tab.Screen name="Messages" component={Messages} />
    </Tab.Navigator>
  );
}

function MainStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="Profile" component={ProfileStack} />
      <Stack.Screen name="OtherScreens" component={OtherScreensStack} />
    </Stack.Navigator>
  );
}

function ProfileStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Profile" component={Profile} />
      <Stack.Screen name="Settings" component={Settings} />
    </Stack.Navigator>
  );
}

function OtherScreensStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="OtherScreen1" component={OtherScreen1} />
      <Stack.Screen name="OtherScreen2" component={OtherScreen2} />
    </Stack.Navigator>
  );
}



export default function App() {
  return (
    <NavigationContainer>
      <MainStack />
    </NavigationContainer>
  );
}

【讨论】：