Question

我不知疲倦地寻找这个问题的答案。

我有一个标签导航器：

const AppNavigator = () => {
return (
<Tab.Navigator initialRouteName="Search">
  <Tab.Screen
    name="Home"
    children={() => <HomeScreen />}
    options={{
      tabBarIcon: ({ color, size }) => (
        <MaterialCommunityIcons name="home" color={color} size={size} />
      ),
    }}
  />
  <Tab.Screen
    name="Search"
    children={() => <SearchContainerNavigator />}
    options={{
      tabBarIcon: ({ color, size }) => (
        <FontAwesome5 name="search" color={color} size={size} />
      ),
    }}
  />
  <Tab.Screen
    name="Feedback"
    children={() => <FeedbackScreen />}
    options={{
      tabBarIcon: ({ color, size }) => (
        <MaterialCommunityIcons name="email" color={color} size={size} />
      ),
    }}
  />
</Tab.Navigator>
);
};

还有这个堆栈导航器：

const SearchContainerNavigator = () => (
<Stack.Navigator screenOptions={{ headerShown: false}} initialRouteName="SearchSelect">
    <Stack.Screen name="SearchSelect" component={SearchSelectScreen} />
    <Stack.Screen name="AircraftSearch" component={AircraftSearchScreen} />
    <Stack.Screen name="AircraftResults" component={AircraftResultsScreen} />
    <Stack.Screen name="AircraftDetail" component={AircraftDetailScreen} />
    <Stack.Screen name="BrandSearch" component={BrandSearchScreen} />
    <Stack.Screen name="BrandResults" component={BrandResultsScreen} />
    <Stack.Screen name="BrandDetail" component={BrandDetailScreen} />
    <Stack.Screen name="Favourites" component={FavouritesScreen} />
</Stack.Navigator>
)

我的问题是如何以编程方式从 HomeScreen 选项卡导航到 Search 选项卡上的 AircraftDetailsScreen？？

提前致谢。

编辑：

HomeScreen is a class.

 handleAircraftSelect = (aircraft_id) => {
 this.props.navigation.navigate("Search", {
   screen: "AircraftDetail",
   params: { id: aircraft_id },
 });
 };

Answer 1

navigation.navigate('Search', {screen: 'AircraftDetail'});

https://reactnavigation.org/docs/nesting-navigators/#navigating-to-a-screen-in-a-nested-navigator

React Native 如何以编程方式导航到选项卡导航器上的堆栈屏幕

1 个答案: