如何在 React-Navigation 5 中定义不同组的导航流

Question

在 React-Navigation 5 之前的版本中，我使用以下 JSON 样式配置来定义多个导航流并将一个流嵌入到另一个流中：

// declare a stack navigator named 'dataListFlow'
const dataListFlow = createStackNavigator({
  DataList: DataListScreen,
  DataDetail: DataDetailScreen,
});

// I use the switch navigator to host two flows: 1. loginFlow 2. mainFlow
const switchNavigator = createSwitchNavigator({
  // 1. loginFlow
  loginFlow: createStackNavigator({
    Signup: SignupScreen,
    Signin: SigninScreen,
  }),

  // 2. mainFlow, NOTE: I embed the dataListFlow into the main flow
  mainFlow: createBottomTabNavigator({
    dataListFlow: dataListFlow,
    dataCreate: dataCreateScreen,
  }),
});

// create the app with the switchNavigator declared above
const App = createAppContainer(switchNavigator);

我想在 React-Navigation 版本 5 中实现相同的功能。我已按照 this 教程使用 React-Navigation 5 创建不同的导航器，但它仅显示了如何分别创建每种类型的导航器.我想知道如何实现可以相互嵌入的导航流，就像我在旧版本的反应导航中所做的那样。有人可以指导我一些代码吗？

Answer 1

实际上没有太大变化，语法和寻址方式发生了变化，因此，如果您在下面看到我使用的是底部选项卡，我现在单独创建了它：

const BottomTab = () => {
  return (
    <Tab.Navigator
      tabBarOptions={{
        activeTintColor: '#fff',
        activeBackgroundColor: '#c47808',
        inactiveBackgroundColor: '#ffbd5c',
        inactiveTintColor: '#c47808',
        style: {
          height: Platform.OS == 'ios' ? hp('10.35%') : hp('8.35%'),
        },
        labelStyle: {
          marginBottom: Platform.OS == 'ios' ? 8 : 2,
        },
      }}
      screenOptions={({route}) => ({
        tabBarIcon: ({focused, color, size}) => {
          return getTabBarIcon(route, focused);
        },
      })}>
      <Tab.Screen name="Home" component={Home} />
      <Tab.Screen name="Meetings" component={Meeting} />
      <Tab.Screen name="My Profile" component={Profile} />
      <Tab.Screen name="Settings" component={Settings} />
    </Tab.Navigator>
  );
};

更新：

const HomeTab = () => {
      return (
       <Stack.Navigator
              initialRouteName="Home"
              screenOptions={{
                headerShown: false,
              }}>
              <Stack.Screen name="Payment" component={Payment} />
              <Stack.Screen name="Profile" component={Profile} />
         
            </Stack.Navigator>
      );
    };

如果你看到我是如何将它包含在我的主堆栈导航器中的：

return (
      <NavigationContainer linking={deepLinking}>
        <Stack.Navigator
          initialRouteName="Login"
          screenOptions={{
            headerShown: false,
          }}>
          <Stack.Screen name="Login" component={LoginScreen} />
          <Stack.Screen name="HomeTab" component={HomeTab} />
          <Stack.Screen name="BottomTab" component={BottomTab} />
     
        </Stack.Navigator>
      </NavigationContainer>
    );

我把它作为一个简单的 Stack.Screen 包括在内，瞧，它的全屏都被使用了。如果您想使用任何其他 stack navigator 并将其作为 stack.screen 导入到主要返回组件中，您也可以这样做。

UPDATE:

See above updated stackscreennavigator

希望对您有所帮助。有疑问请随意

更新 2：

我所有的代码：

import React, {Component} from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
  Image,
  Platform,
} from 'react-native';

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import LoginScreen from './app/views/auth/LoginScreen';
import SignupEmail from './app/views/auth/SignupEmailScreen';
import SignupDetails from './app/views/auth/SignupDetails';
import Home from './app/views/home/Home';
import Meeting from './app/views/meetings/Meeting';
import Profile from './app/views/profile/Profile';
import Settings from './app/views/settings/Settings';
import ScheduleMeeting from './app/views/meetings/ScheduleMeeting';
import MeetCall from './app/views/meet/MeetCall';
import JitSiCall from './app/views/meet/Jitsi';
import {
  widthPercentageToDP as wp,
  heightPercentageToDP as hp,
} from 'react-native-responsive-screen';
import Webrtc from './app/views/meet/Webrtc';

const Tab = createBottomTabNavigator();

const Stack = createStackNavigator();

// this function gives the icons when tab is selected
const getTabBarIcon = (route, focused) => {
  const routeName = route.name;
  if (routeName === 'Home') {
    if (focused) {
      return (
        <Image
          style={{height: 22, width: 23}}
          source={require('./app/assets/images/homeF.png')}
        />
      );
    } else {
      return (
        <Image
          style={{height: 22, width: 23}}
          source={require('./app/assets/images/homeUf.png')}
        />
      );
    }
  }

  if (routeName === 'Meetings') {
    if (focused) {
      return (
        <Image
          style={styles.imageHeight}
          source={require('./app/assets/images/meetingsF.png')}
          resizeMode="contain"
        />
      );
    } else {
      // console.log(props, 'props');
      return (
        <Image
          style={styles.imageHeight}
          source={require('./app/assets/images/meetingsUF.png')}
          resizeMode="contain"
        />
      );
    }
  }

  if (routeName === 'My Profile') {
    if (focused) {
      return (
        <Image
          style={styles.imageHeight}
          source={require('./app/assets/images/profileF.png')}
          resizeMode="contain"
        />
      );
    } else {
      return (
        <Image
          style={styles.imageHeight}
          source={require('./app/assets/images/profileUf.png')}
          resizeMode="contain"
        />
      );
    }
  }

  if (routeName === 'Settings') {
    if (focused) {
      return (
        <Image
          style={styles.imageHeight}
          source={require('./app/assets/images/settingsF.png')}
          resizeMode="contain"
        />
      );
    } else {
      return (
        <Image
          style={styles.imageHeight}
          source={require('./app/assets/images/settingsUf.png')}
          resizeMode="contain"
        />
      );
    }
  }
};

const BottomTab = () => {
  return (
    <Tab.Navigator
      tabBarOptions={{
        activeTintColor: '#fff',
        activeBackgroundColor: '#c47808',
        inactiveBackgroundColor: '#ffbd5c',
        inactiveTintColor: '#c47808',
        style: {
          height: Platform.OS == 'ios' ? hp('10.35%') : hp('8.35%'),
        },
        labelStyle: {
          marginBottom: Platform.OS == 'ios' ? 8 : 2,
        },
      }}
      screenOptions={({route}) => ({
        tabBarIcon: ({focused, color, size}) => {
          return getTabBarIcon(route, focused);
        },
      })}>
      <Tab.Screen name="Home" component={Home} />
      <Tab.Screen name="Meetings" component={Meeting} />
      <Tab.Screen name="My Profile" component={Profile} />
      <Tab.Screen name="Settings" component={Settings} />
    </Tab.Navigator>
  );
};

class App extends Component {
  render() {
    
    return (
      <NavigationContainer linking={deepLinking}>
        <Stack.Navigator
          initialRouteName="Login"
          screenOptions={{
            headerShown: false,
          }}>
          <Stack.Screen name="Login" component={LoginScreen} />
          <Stack.Screen name="SignupEmail" component={SignupEmail} />
          <Stack.Screen name="SignupDetails" component={SignupDetails} />
          <Stack.Screen name="ScheduleMeeting" component={ScheduleMeeting} />
          <Stack.Screen name="BottomTab" component={BottomTab} />
          <Stack.Screen name="MeetCall" component={MeetCall} />
          <Stack.Screen name="JitSiCall" component={JitSiCall} />
          <Stack.Screen name="Webrtc" component={Webrtc} />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
}

const styles = StyleSheet.create({
  scrollView: {
    backgroundColor: Colors.lighter,
  },
  engine: {
    position: 'absolute',
    right: 0,
  },
  body: {
    backgroundColor: Colors.white,
  },
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    color: Colors.black,
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
    color: Colors.dark,
  },
  highlight: {
    fontWeight: '700',
  },
  footer: {
    color: Colors.dark,
    fontSize: 12,
    fontWeight: '600',
    padding: 4,
    paddingRight: 12,
    textAlign: 'right',
  },
  imageHeight: {
    height: 22,
    width: 20,
    paddingTop: 4,
  },
});

export default App;

如何在 React-Navigation 5 中定义不同组的导航流

How to define different groups of navigation flow in React-Navigation 5

react-native

react-navigation

react-navigation-v5