将水平滚动视图添加到底部导航选项卡

Question

早上好/下午好/晚上好

我必须为班级的期末项目创建一个应用程序，因此我决定为此使用 React Native。但我才刚刚开始。我从 youtube 视频中获得了这段代码，但看看其他代码片段，我想知道这段代码对于它应该做的事情来说是否有点太复杂了

我看到其他实现底部导航栏的方法，允许在我的应用程序的所有页面之间添加水平滚动视图

所以我想知道，我应该完全更改我的代码还是有办法向它添加水平滚动视图？

提前感谢您的回答

文件：MainContainer.js

import * as React from 'react';

import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Ionicons from 'react-native-vector-icons/Ionicons'

//Screens
import WelcomeScreen from './screens/Welcome'
import InventoryScreen from './screens/Inventory'
import PatientsScreen from './screens/Patients'

// Screen names
const welcomeName = 'Bienvenue'
const inventoryName = 'Inventaire'
const patientsName = 'Patients'

const Tab = createBottomTabNavigator();

export default function MainContainer(){
    return(
      <NavigationContainer>
        <Tab.Navigator 
        initialRouteName={welcomeName}
        screenOptions={({route}) => ({
            tabBarIcon: ({focused, color, size}) => {
                let iconName;
                let rn = route.name;

                if(rn === welcomeName){
                    iconName = focused ? 'home' : 'home-outline'
                } else if (rn === inventoryName){
                    iconName = focused ? 'list' : 'list-outline'
                } else if (rn === patientsName){
                    iconName = focused ? 'people-circle' : 'people-circle-outline'
                }

                return <Ionicons name={iconName} size={size} color={color}/>
            },
        })}
        tabBarOptions={{
            activeTintColor: 'tomato',
            inactiveTintColor: 'grey',
            labelStyle: { paddingBottom : 10, fontSize : 10},
            style: {padding: 10, height: 70},
        }}
        
        >

        <Tab.Screen name={welcomeName} component={WelcomeScreen}/>
        <Tab.Screen name={patientsName} component={PatientsScreen}/>
        <Tab.Screen name={inventoryName} component={InventoryScreen}/>

        </Tab.Navigator>
      </NavigationContainer>
    )
}

文件：App.js

import * as React from 'react';
import MainContainer from './navigation/MainContainer';

function App(){
  return(
    <MainContainer></MainContainer>
  )
}

export default App;

试图创建一个 HorizontalScrollView.js 文件，但不知道我是否可以在我的 MainContainer.js 或 App.js 文件中实现它

import React, { Component } from 'react';
import {
    AppRegistry,
    ScrollView,
    Text, View,
    Dimensions } from 'react-native';

export default class HorizontalScrollView extends Component {
    render(){
        let screenWidth = Dimensions.get('window').width;
        let screenHeight = Dimensions.get('window').height;
        return(
            <ScrollView
                horizontal={true}
            >
                // That's where i should add the views of each page
            </ScrollView>
        );
    }
}