3-1底部导航的配置

1.安装依赖

yarn add react-navigation-tabs

2.第二步引入配置路由

在路由文件里 新建一个tabs.js

import { createBottomTabNavigator } from 'react-navigation-tabs';
import MusicPage from '../views/tabs/MusicPage';
import Mvpage from '../views/tabs/Mvpage';
const TabNavigator = createBottomTabNavigator({
    Music:{
        screen:MusicPage,
        navigationOptions:{
            tabBarLabel:"音乐"
        }
        },
    Mv:Mvpage
});
export default TabNavigator

3.新建底部导航需要的页面

使用

4在父组件中使用

import React, { Component } from 'react';
import Tabs from '../routers/tabs'
export default class HomePage extends Component {
  render() {
    return <Tabs/>
  }
}

5.直接使用（第二种）路由文件

//tabs.js

import { createBottomTabNavigator } from 'react-navigation-tabs';
import MusicPage from '../views/tabs/MusicPage';
import Mvpage from '../views/tabs/Mvpage';
const TabNavigator = createBottomTabNavigator({
    Music:{
        screen:MusicPage,
        navigationOptions:{
            tabBarLabel:"音乐"
        }},
    Mv:Mvpage
}); 
export default TabNavigator   //直接导出

//index.js

import Tabs from './tabs'
const MainNavigator = createStackNavigator({
  HomePage:{
    screen:Tabs
  }
})

6.配置颜色等

import { createBottomTabNavigator } from 'react-navigation-tabs';
import MusicPage from '../views/tabs/MusicPage';
import Mvpage from '../views/tabs/Mvpage';
const TabNavigator = createBottomTabNavigator({
    Music:{
        screen:MusicPage,
        navigationOptions:{
            tabBarLabel:"音乐"
        }
        },
    Mv:Mvpage
},{
  tabBarOptions:{
        activeTintColor:'red',  //被选中时颜色
        inactiveTintColor:"blue",  //未被选中时的颜色
        style:{ 
            backgroundColor:'#4442'  //背景颜色
        },
        labelStyle:{
            fontSize:18   //字体大小
        }
    }
});
export default TabNavigator

7.配置带图标的底部导航

安装依赖
yarn add react-native-vector-icons 参考icons的使用这节笔记

import React from 'react'; 
import Ionicons from 'react-native-vector-icons/Ionicons'
//首先要引入  加在颜色配置的大括号里
defaultNavigationOptions: ({ navigation }) => ({
          tabBarIcon: ({ focused, horizontal, tintColor }) => {
            const { routeName } = navigation.state;
            let IconComponent = Ionicons;
            let iconName;
            if (routeName === 'Music') {
              iconName = `ios-home`;
            } else if (routeName === 'Mv') {
              iconName = `ios-options`;
            }
            return <IconComponent name={iconName} size={25} color={tintColor} />;
          },
        }),

8.底部导航对应的顶部导航

//首先要引入  加在颜色配置的大括号里
navigationOptions:({navigation})=>{ 
        const {routeName} = navigation.state.routes[navigation.state.index];
        if (routeName === 'Music') {
            return {
                headerTitle:"音乐"
            }
          } else if (routeName === 'Mv') {
            return {
                headerTitle:"Mv"
            }
          }
}

9.完整事例

import React from 'react';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import MusicPage from '../views/tabs/MusicPage';
import Mvpage from '../views/tabs/Mvpage';
import Ionicons from 'react-native-vector-icons/Ionicons'
const TabNavigator = createBottomTabNavigator({
    Music:{
        screen:MusicPage,
        navigationOptions:{
            tabBarLabel:"音乐"
        }
        },
    Mv:Mvpage
    },
    {
        defaultNavigationOptions: ({ navigation }) => ({
          tabBarIcon: ({ focused, horizontal, tintColor }) => {
            const { routeName } = navigation.state;
            let IconComponent = Ionicons;
            let iconName;
            if (routeName === 'Music') {
              iconName = `ios-home`;
            } else if (routeName === 'Mv') {
              iconName = `ios-options`;
            }
            return <IconComponent name={iconName} size={25} color={tintColor} />;
          },
        }),
    tabBarOptions:{
        activeTintColor:'red',
        inactiveTintColor:"blue",
        style:{
            backgroundColor:'#4442'
        },
        labelStyle:{
            fontSize:18
        }
    },
    navigationOptions:({navigation})=>{
        const {routeName} = navigation.state.routes[navigation.state.index];
        if (routeName === 'Music') {
            return {
                headerTitle:"音乐"
            }
          } else if (routeName === 'Mv') {
            return {
                headerTitle:"Mv"
            }
          }
    }
});
export default TabNavigator