如何在本机反应中导航到另一个屏幕的特定选项卡？

Question

我在反应本机中有以下导航设置：

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. 由于它位于不同的屏幕中，我怎样才能实现这一点？

Groups Tab我可以使用Home 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

您必须使用以下方法，因为“更改密码”屏幕嵌套在“设置”导航器内

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

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