react-navigation + react-native-vector-icons

1.安装

yarn add react-navigation react-native-vector-icons

2.创建 root.js

import React, {Component} from 'react';
import {createStackNavigator} from 'react-navigation'
import Tab from './scene/Web/ButtomTab'
import login from './scene/login'
import Positioning from "./scene/Home/Positioning";
import Jump from "./scene/Home/Jump";

type Props = {};

export default class root extends Component<Props> {
    render() {
        return (
            <HomeStack/>
        );
    }
}

const HomeStack = createStackNavigator({
    //底部导航页面
    Homes: {
        screen: Tab,
        navigationOptions: {
            header: null  //顶部导航很多都会自己自定义，这里就为空
        }
    },
    //登录页面
    login: {
        screen: login,
    },
    //定位
    Positioning: {
        screen: Positioning,
        navigationOptions: {
            header: null  //顶部导航很多都会自己自定义，这里就为空
        }
    },
    //测试跳页的页面
    Jump: {
        screen: Jump,
        navigationOptions: {
            title: '选择定位'
        }

    }
}, {
    //默认出现的首页页面
    initialRouteName: 'Homes'
});

代码中有注释，代表的意思，进入到根后到createStackNavigator，默认输出的家园中到选项卡的底部标签，跳转接着到

接着上标签里出现到createButtomNavigator导航到代码

3.创建 底部选项卡

import React, {Component} from 'react';
import {
    StyleSheet,
    Dimensions,
    Platform
} from 'react-native';
import color from './Color'  //颜色样式
import Memo from "../Memo/Memo";
import Ionicons from 'react-native-vector-icons/Ionicons'
import Statistics from "../Statistics/Statistics";
import {createBottomTabNavigator} from "react-navigation";
import Home from "../Home/Home";
import My from "../My/My"

export default  Tab = createBottomTabNavigator({
    Home: {
        screen: Home,
        navigationOptions: {
            tabBarPosition: 'bottom',
            tabBarLabel: '首页',
            showLabel:false,
            tabBarIcon: ({tintColor, focused}) => (
                <Ionicons
                    name={focused ? 'ios-home' : 'ios-home-outline'}
                    size={26}
                    style={{color: tintColor}}
                />
            ),
        }
    },
    Memorandum: {
        screen: Memo,
        navigationOptions: {
            tabBarPosition: 'bottom',
            tabBarLabel: '备忘',
            tabBarIcon: ({tintColor, focused}) => (
                <Ionicons
                    name={focused ? 'ios-paper' : 'ios-paper-outline'}
                    size={26}
                    style={{color: tintColor}}
                />
            ),
        }
    },
    Statistics: {
        screen: Statistics,
        navigationOptions: {
            tabBarLabel: '统计',
            tabBarPosition: 'bottom',
            tabBarIcon: ({tintColor, focused}) => (
                <Ionicons
                    name={focused ? 'ios-stats' : 'ios-stats-outline'}
                    size={26}
                    style={{color: tintColor}}
                />
            ),
        }
    },
    My: {
        screen: My,
        navigationOptions: {
            tabBarLabel: '我的',
            tabBarPosition: 'bottom',
            tabBarIcon: ({tintColor, focused}) => (
                <Ionicons
                    name={focused ? 'ios-person' : 'ios-person-outline'}
                    size={26}
                    style={{color: tintColor}}
                />
            ),
        }
    },

}, {
    tabBarOptions: {
        activeTintColor: color.primary,
        inactiveTintColor: color.gray,
    },
    animationEnabled: true,
    swipeEnabled: false,
    //是否可以滑动切换
    swipeEnabled: true,
    //切换是否有动画
    animationEnabled: true,
    //进入App的首页面
    initialRouteName: 'Home',
    //对于导航的设置
    tabBarOptions: {
        //android特有下划线的颜色1
        indicatorStyle: {height: 0},
        //文字的样式
        labelStyle: {
            fontSize: 10
        },
        //对于导航的stytles
        style :{
            borderTopColor:'#ebebeb',
            borderTopWidth:1,
            backgroundColor:'white',
            height:Dimensions.get('window').height*0.08,
        }
    }
});

颜色样式

export default {
    primary: '#1E90FF',  //主题样式 选中底部标题和图片的颜色以及顶部标题
    border: '#e0e0e0',
    paper: '#f3f3f3',
    gray: '#979797', //灰色  未选中底部标题和图片的颜色1
    background:'#F5FCFF',
    white:'#FFFFFF',
    titleBottonSolid: '#979797',
}

.