嵌套在堆栈导航器中的 React Native 选项卡导航器

Question

我是 React Native 的新手，正在为屏幕而苦苦挣扎。我已经阅读了嵌套导航文档 (https://reactnavigation.org/docs/nesting-navigators/)，它帮助我设置了初始导航设置，但我遇到了一些问题。

我正在尝试设置该应用程序，使其初始屏幕显示为“Select 用户”，没有标签导航。选择用户后，您将被重定向到另一个具有选项卡导航的屏幕。我目前可以使用它，但是在初始屏幕后我无法访问任何 route/props/params。

我不得不使用 import { useNavigation } from "@react-navigation/native"; 手动导入导航，即使我在 Navigation.push 中提供了参数，但尝试在我的屏幕上访问 {route} 时显示路线是未定义。

我的屏幕设置类似于以下内容：

const Tab = createBottomTabNavigator();
const WelcomeStack = createStackNavigator();
const HomeStack = createStackNavigator();
const SettingsStack = createStackNavigator();
const Stack = createStackNavigator();

const WelcomeStackScreen = () => (
    <WelcomeStack.Navigator>
        <WelcomeStack.Screen
            name="Welcome"
            component={WelcomeScreen}
            options={{ headerShown: false }}
        />
        <WelcomeStack.Screen
            name="SignUp"
            component={SignUpScreen}
            options={{ headerShown: false }}
        />
    </WelcomeStack.Navigator>
);

const HomeStackScreen = () => {
    return (
        <HomeStack.Navigator>
            <HomeStack.Screen name="Home" component={HomeScreen} />
            <HomeStack.Screen
                name="Search"
                component={SearchResultScreen}
                options={({ navigation }) => ({
                    headerLeft: () => (
                        <Ionicons
                            name={"arrow-back"}
                            size={30}
                            color={colours.text}
                            style={{ paddingLeft: 15 }}
                            onPress={() => {
                                navigation.goBack();
                            }}
                        />
                    ),
                })}
            />
            <HomeStack.Screen
                name="Select"
                component={SelectScreen}
                options={({ navigation, route }) => ({
                    title: route.params.name,
                    headerLeft: () => (
                        <Ionicons
                            name={"arrow-back"}
                            size={30}
                            color={colours.text}
                            style={{ paddingLeft: 15 }}
                            onPress={() => {
                                navigation.goBack();
                            }}
                        />
                    ),
                })}
            />
            <HomeStack.Screen name="Read" component={ReaderScreen} />
        </HomeStack.Navigator>
    );
};

function SettingsScreen() {
    return (
        <View
            style={{ flex: 1, justifyContent: "center", alignItems: "center" }}
        >
            <Text>TBD</Text>
        </View>
    );
}

const SettingsStackScreen = () => (
    <SettingsStack.Navigator>
        <SettingsStack.Screen name="Settings" component={SettingsScreen} />
    </SettingsStack.Navigator>
);

const TabNavigator = ({ route }) => (
    <Tab.Navigator
        screenOptions={({ route }) => ({
            tabBarIcon: ({ focused, color, size }) => {
                let iconName;
                switch (route.name) {
                    case "Home":
                        iconName = focused ? "home" : "home-outline";
                        break;
                    case "Settings":
                        iconName = focused ? "list" : "list-outline";
                        break;
                    default:
                        break;
                }

                return <Ionicons name={iconName} size={size} color={color} />;
            },
        })}
        tabBarOptions={{
            activeTintColor: "tomato",
            inactiveTintColor: "gray",
        }}
    >
        <Tab.Screen name="Home" component={HomeStackScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen}/>
    </Tab.Navigator>
);

export default function App() {
    return (
        <NavigationContainer theme={navThemeOverride}>
            <Stack.Navigator>
                <Stack.Screen name="Welcome" component={WelcomeStackScreen} />
                <Stack.Screen
                    name="TabNavigator"
                    component={TabNavigator}
                    options={{ headerShown: false }}
                    navigationOptions={{ gesturesEnabled: false }}
                />
            </Stack.Navigator>
        </NavigationContainer>
    );
}

下面是欢迎屏幕导航中的一个片段

navigation.push("TabNavigator", {
    screen: "Home",
    params: {
      userId: userId,
  },
});

Answer 1

您尝试从父选项卡导航器导航到的主屏幕...也是 StackNavigator...我想您想导航到 Select 屏幕...所以有您的导航工作需要一个额外的级别...

   navigation.navigate('TabNavigator', {
      screen: 'Home', // <--- StackNavigator
      params: {
        screen: 'Select', // <-- nested inside HomeStack
        params: {
          title: 'Your custom title for Select screen here ...',
        },
      },
    });

加上+

在您的 Tab 导航器中 route 有双重定义

const TabNavigator = ({ route }) => ( //<--- here
    <Tab.Navigator
        screenOptions={({ route }) => ({ // <- and here

改为

function TabNavigator() {
  return <Tab.Navigator screenOptions={({ route }) => ({})>{/* ...Tabs... */}</Tab.Navigator>;
}

嵌套在堆栈导航器中的 React Native 选项卡导航器

React Native tab navigator nested in stack navigator

javascript

reactjs

react-native

react-navigation