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

我必须为我班上的期末项目创建一个App，我决定使用Reaction 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;

try 创建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>
        );
    }
}