Question

我正在更新代码以使用react-navigation 5.x，但我不知道如何在此版本中使用底部标签导航器实现堆栈导航。我仅在用户登录后出现的屏幕上使用底部的标签导航器。在初始屏幕上，只有带有自定义按钮的导航。我的问题是我不知道如何创建达到我所需要的路线。我一直在寻找代码示例，但是我只发现仅使用底部标签导航器的代码。您能给我一个我可以使用的代码示例吗？我会很感激的

我有这段代码是我现在正在工作的

import React from 'react'
import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';

import Login from '../screens/Login'
import Register from '../screens/Register'
import Main from '../screens/Main'
import Ex1 from '../screens/Ex1'
import Ex2 from '../screens/Ex2'

const AuthStack = createStackNavigator();

const AuthStackScreen = () => (
    <NavigationContainer>
        <AuthStack.Navigator 
        initialRouteName="Login" 
        screenOptions={{
            headerShown: false
        }}>
            <AuthStack.Screen
            name="Login"
            component={Login}
            />
            <AuthStack.Screen
            name="Register"
            component={Register}
            />
        </AuthStack.Navigator>
    </NavigationContainer>
);

export default AuthStackScreen

Answer 1

您可以执行以下操作：

export default function ComponentC() {
    return(
        <View>
            <Text>It Works!</Text>
        </View>
    )
}

export default function ComponentB() {
  return (
    <Stack.Navigator initialRouteName={'Main'}>
        <Stack.Screen name={'Main'} component={ComponentC} />
    </Stack.Navigator>   
  );
} 

export default function ComponentA () {
    return (
      <NavigationContainer>
        <Tab.Navigator
          initialRouteName={'ComponentB'}
        >
          <Tab.Screen name={'ComponentB'} component={ComponentB} options={{ tabBarIcon: ({color}) => (
              <FontAwesome5 color={color}  name={'check-square'} size={20}/>
          )}} />
        </Tab.Navigator>
      </NavigationContainer>    
    );
  }

组件B将在“底部标签”导航器中被调用，初始路径将是组件C。

如何使用React Navigation 5.X在底部标签导航器中使用堆栈导航

1 个答案: