如何在 React Native 中导航到另一个屏幕的特定选项卡？

Question

我在 react-native 中有以下导航设置：

const HomeTabs = createTopTabNavigator();

function HomeScreen() {
  return (
    <HomeTabs.Navigator>
      <HomeTabs.Screen name="Feed" component={FeedTab} />
      <HomeTabs.Screen name="Groups" component={GroupsTab} />
    </HomeTabs.Navigator>
  );
}

const SettingsTabs = createTopTabNavigator();

function SettingsScreen() {
  return (
    <SettingsTabs.Navigator>
      <SettingsTabs.Screen name="Profile" component={ProfileTab} />
      <SettingsTabs.Screen name="Change Password" component={ChangePasswordTab} />
    </SettingsTabs.Navigator>
  );
}

const RootStack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <RootStack.Navigator>
        <RootStack.Screen name="Home" component={HomeScreen} />
        <RootStack.Screen name="Settings" component={SettingsScreen} />
      </RootStack.Navigator>
    </NavigationContainer>
  );

}

在 Feed Tab 中有一个按钮，我需要使用它导航到 Change Password Tab。由于它在不同的屏幕上，我该如何实现？

我可以使用如下按钮轻松地从 Home Tab 导航到 Groups Tab：

<TouchableOpacity onPress={() => navigation.navigate('Groups')}>
    <Text>Go to groups</Text>
</TouchableOpacity>

这是因为Home Tab和Groups Tab都在同一个屏幕上。但是当我有类似以下内容时：

<TouchableOpacity onPress={() => navigation.navigate('Change Password')}>
    <Text>Change Password</Text>
</TouchableOpacity>

我收到如下错误：

The action 'NAVIGATE' with payload {"name":"Change Password"} was not handled by any navigator.

Do you have a screen named 'Change Password'?

我该如何解决这个问题？

Answer 1

您将不得不使用以下方法，因为屏幕 'Change Password' 嵌套在 'Settings' 导航器

中

navigation.navigate('Settings', { screen: 'Change Password' });

您可以查看下面的文档 https://reactnavigation.org/docs/nesting-navigators/#navigating-to-a-screen-in-a-nested-navigator

如何在 React Native 中导航到另一个屏幕的特定选项卡？

How to navigate to a specific tab of another screen in react native?

react-native

react-navigation