react native 实现底部导航栏

引入这些依赖包缺一不可:

"react-native-gesture-handler": "^1.10.3",
    "react-native-reanimated": "^2.2.0",
    "react-native-safe-area-context": "^3.2.0",
    "react-native-screens": "^3.4.0",
    "react-native-tab-view": "^3.0.1",
    "react-navigation": "^4.4.4",
    "react-navigation-stack": "^2.10.4",
    "react-navigation-tabs": "^2.11.1"

App.js

import React from 'react';
import {createAppContainer} from 'react-navigation'
import {createStackNavigator} from 'react-navigation-stack'
import BottomNavigator from './page/root/rootPage'
const AppStack=createStackNavigator(
    {
        BottomNavigation:{
            screen:BottomNavigator,
            navigationOption:{
                headerShow:false
            }
        }
    },{
        mode:'modal',
        headerMode:'none'
    }
);
export default createAppContainer(AppStack);

./page/root/rootPage.js

import {createBottomTabNavigator} from 'react-navigation-tabs'
import HomePage from '../home/homePage'
import CatePage from '../cate/catePage'
import MinePage from '../mine/minePage'
const BottomNavigator = createBottomTabNavigator({
    Home:{
        screen:HomePage,
        navigationOptions:{
            title:'首页',
            tabBarLabel:'首页'
        }
    },
    Cate:{
        screen:CatePage,
        navigationOptions:{
            title:'分类',
            tabBarLabel:'分类'
        }
    },
    Mine:{
        screen:MinePage,
        navigationOptions:{
            title:'我的',
            tabBarLabel:'我的'
        }
    }
});
export default  BottomNavigator;

引入的三个页面文件都差不多
简单的修改了一下文字

…/home/homePage.js

import React from 'react';

import {
    StyleSheet,
    Text,
    View,
} from 'react-native';

const HomePage=()=>{
    return (
        <>
            <View style={styles.view}>
                <Text>Home Page</Text>
            </View>
        </>
    )
};
const styles=StyleSheet.create({
    view:{
        height:200,
        width:200,
        backgroundColor:"rgba(200,255,0,0.5)"
    }
})

export default HomePage;

…/mine/minePage.js

import React from 'react';

import {
    StyleSheet,
    Text,
    View,
} from 'react-native';

const CatePage=()=>{
    return (
        <>
            <View style={styles.view}>
                <Text>Cate Page</Text>
            </View>
        </>
    )
};
const styles=StyleSheet.create({
    view:{
        height:200,
        width:200,
        backgroundColor:"rgba(200,255,0,0.5)"
    }
})

export default CatePage;

…/cate/catePage.js

import React from 'react';

import {
    StyleSheet,
    Text,
    View,
} from 'react-native';

const MinePage=()=>{
    return (
        <>
            <View style={styles.view}>
                <Text>Mine Page</Text>
            </View>
        </>
    )
};
const styles=StyleSheet.create({
    view:{
        height:200,
        width:200,
        backgroundColor:"rgba(200,255,0,0.5)"
    }
});

export default MinePage;