icon第三方库
yarn add react-native-vector-icons
react-native link react-native-vector-icons

import React from ''react''; //只要在页面中使用了基础组件 都需要导入这句话 不然会报错
import {Button} from ''react-native'';
import { createStackNavigator,createAppContainer,createBottomTabNavigator } from ''react-navigation'';
import HomePage from ''../pages/HomePage'';
import Page1 from ''../pages/Page1'';
import Page2 from ''../pages/Page2'';
import Page3 from ''../pages/Page3'';
import Page4 from ''../pages/Page4'';
import Page5 from ''../pages/Page5'';
import Ionicons from ''react-native-vector-icons/Ionicons''


const AppBottomNavigator=createBottomTabNavigator({
  Page1:{
       screen:Page1,
       navigationOptions:{
         tabBarLabel: ''最热'',
         tabBarIcon:({tintColor,focused})=>(<Ionicons
            name={''ios-home''}
            size={26}
            style={{color:tintColor}}
         />)
       }
    },
    Page2:{
       screen:Page2,
       navigationOptions:{
         tabBarLabel: ''趋势'',
         tabBarIcon:({tintColor,focused})=>(<Ionicons
            name={''ios-appstore''} // 全部小写
            size={26}
            style={{color:tintColor}}
         />)
       }
    },
}

);

//HomePage Page1 Page2 这些是页面名，到时候导航器就接收这个参数进行界面跳转
const AppStackNavigator = createStackNavigator({
    HomePage: {
        screen: HomePage
    },
    Page1: {
        screen: AppBottomNavigator,
        navigationOptions: ({navigation}) => ({
            title: `${navigation.state.params.name}页面名`//动态设置navigationOptions
        })
    },
    Page2: {
        screen: AppBottomNavigator,
        navigationOptions: {//在这里定义每个页面的导航属性，静态配置
            title: "This is Page2.",
        }
    },
    Page3: {
        screen: Page3,
        navigationOptions: (props) => {//在这里定义每个页面的导航属性，动态配置
            const {navigation} = props;
            const {state, setParams} = navigation;
            const {params} = state;
            return {
                title: params.title ? params.title : ''This is Page3'',
                headerRight: (
                    <Button
                        title={params.mode === ''edit'' ? ''保存'' : ''编辑''}
                        onPress={()=>{setParams({mode: params.mode === ''edit'' ? '''' : ''edit''})}
                            }
                    />
                ),
            }
        }
    },
    Bottom:{
      screen:AppBottomNavigator,
      navigationOptions:{
        title:''BottomNavigator''
      }
    },

}, {
    defaultNavigationOptions: {
        // header: null,// 可以通过将header设为null 来禁用StackNavigator的Navigation Bar
    }
});


const App = createAppContainer(AppStackNavigator)
export default App

yarn add react-navigation

yarn add react-native-reanimated react-native-gesture-handler react-native-screens@^1.0.0-alpha.23

yarn add react-navigation-tabs

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

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

import Ionicons from ''react-native-vector-icons'';

// 下面是 4个组件
class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: ''center'', alignItems: ''center'' }}>
          <Text>Home!</Text>
      </View>
    );
  }
}

class SettingsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: ''center'', alignItems: ''center'' }}>
        <Text>Settings!</Text>
      </View>
    );
  }
}

class Xinjia extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: ''center'', alignItems: ''center'' }}>
        <Text>新加坡</Text>
      </View>
    );
  }
}

class Malai extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: ''center'', alignItems: ''center'' }}>
        <Text>马来西亚</Text>
      </View>
    );
  }
}
               
const TabNavigator = createBottomTabNavigator(
  {
    Home:{
      screen: HomeScreen,
      navigationOptions:({navigation})=>({       
          tabBarLabel:"中国",
          tabBarIcon:({focused,horizontal,tintColor})=>{
            let image = focused ? require(''./xiong.jpg'') : require(''./mao.jpg'');
              return <Image style={{height:40, width:40}} source={image} />
          }     
      })
      
    },
    Setting:{
      screen: SettingsScreen,
      navigationOptions:{
        tabBarLabel:"日本",
        // 配置Icon图标有两种方式，（1）使用图片，我觉得简单（2）使用图标库
        tabBarIcon:({focused,horizontal,tintColor})=>{ 
          let image = focused ? require(''./xiong.jpg'') : require(''./mao.jpg'');
            return <Image style={{height:40, width:40}} source={image} />
        }   
      }
    },
    Xin:{
      screen: Xinjia,
      navigationOptions:{
        tabBarLabel:"新加",
       //  tabBarVisible: false 隐藏标签栏，就是隐藏tabBar
      }
    },
    Malai:{
      screen: Malai,
      navigationOptions:{
        tabBarLabel:"马来"
      }
    }
  },
  {
    tabBarOptions: {
      showIcon: true,            // 是否显示选项卡的图标 
      activeTintColor: ''tomato'', // 选中时状态颜色
      inactiveTintColor: ''gray'', // 未选中状态颜色
      labelStyle: {              // 选项卡标签的样式对象
        fontSize: 12,            
      },
      style: {                   // 选项卡栏的样式对象
        backgroundColor: ''blue'', 
      },
    }
  }
);

export default createAppContainer(TabNavigator);

navigationOptions:{
        tabBarLabel:"日本",
        tabBarIcon:({focused,horizontal,tintColor})=>{ 
          let image = focused ? require(''./xiong.jpg'') : require(''./mao.jpg'');
            return <Image style={{height:40, width:40}} source={image} />
        }   
      }