react native 底部导航 createBottomTabNavigator

1.安装  组件

yarn add react-navigation-tabs

2.创建自定义底部导航组件类 BaseNav.js

import React,{ Component} from 'react';
import {
    View,
    Text,
    Button
} from 'react-native';

import {createAppContainer} from 'react-navigation';//容器
import {} from 'react-navigation-tabs';
import {createBottomTabNavigator} from 'react-navigation-tabs';

class HomeScreen extends Component{
    render(){
        return(
            <View style={{
                flex:1,
                backgroundColor:'cyan',
                justifyContent:'center',
                alignItems:'center'
            }}>
                <Text>首页</Text>
            </View>
        )
    }
}

class DetailScreen extends Component{
    render(){
        return(
            <View style={{
                flex:1,
                backgroundColor:'red',
                justifyContent:'center',
                alignItems:'center'
            }}>
                <Text>详情页</Text>
            </View>
        )
    }
}

//路由堆栈
const TabNavigator=createBottomTabNavigator({
    Home:HomeScreen,
    Detail:DetailScreen
});

//容器
const AppContainer=createAppContainer(TabNavigator);


export default  AppContainer;

3.App.js引用自定义组件

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

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

import BaseNav from './navigator/BaseNav';

const App: () => React$Node = () => {

  return (
    <BaseNav/>
     
  );
};

const styles=StyleSheet.create({

});


export default App;

4.运行结果如图