createBottomTabNavigator和createStackNavigator的使用

createBottomTabNavigator直接代码

import React,{Component} from 'react';
import {View,Image} from 'react-native';
import {createAppContainer,} from 'react-navigation';
import {createBottomTabNavigator} from 'react-navigation-tabs';


class HomeScreen extends React.Component {
    render() {
      return (
        
          Home!
        
      );
    }
  }
  
  class SettingsScreen extends React.Component {
    render() {
      return (
        
          Settings!
        
      );
    }
  }
  
  const TabNavigator = createBottomTabNavigator({
    Home: {
        screen:HomeScreen,
        navigationOptions:{
            tabBarLabel:'首页',
            tabBarIcon:({focused})=>(
                
            ),
        }
    },
    Settings: {
        screen:SettingsScreen,
        navigationOptions:{
            tabBarLabel:'我的',
            tabBarIcon:({focused})=>(
                
            ),
        }
    },
  },{
      initialRouteName:'Settings', //默认选中的
    //   order:['Settings','Home'] //routeNames数组，用于定义选项卡的顺序。
      tabBarOptions:{
          activeTintColor:'#F77B4A',
          inactiveTintColor:'#999',
          labelStyle:{
              fontSize:10,
          }
      }

      
  });
  
const appContainer  = createAppContainer(TabNavigator);//这一步不可避免

export default appContainer;

集成过程中的遇到的问题

1.createBottomTabNavigator在类库react-navigation-tabs中而不再react-nabigation中。所有除了导入react-navigation库，还得导入react-navigation-tabs库。
2.react-navigation-tabs库yarn add进工程后，有可能报错如下图，发现react-navigation-tabs库中有文件依赖库react-native-reanimated。

Simulator Screen Shot - iPhone 8 - 2019-11-19 at 10.12.23.png

3.添加react-native-reanimated库后还可能报错，这个使用需要cd进入ios工程更目录，执行命令pod install

createStackNavigator 直接代码

import React,{Component} from 'react';
import {View, Text,TouchableHighlight,Image} from 'react-native';
import {createAppContainer,createNavigationContainer,createNavigator} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import Login from './Components/Login.js';
import Register from './Components/Register.js';


const loginNav = createStackNavigator({
    Login:{
        screen:Login,
        navigationOptions:{
            title:'登录'
        }
    },
    Register:{
        screen:Register,
        navigationOptions:(props)=>({
            title:'注册',
            headerLeft:(
                renderNavLeftButton(props.navigation)
            ),
        })
    }
});
const renderNavLeftButton=(navigation)=>{
    console.warn(JSON.stringify(navigation));
    return(
      {backAction(navigation)}}
        underlayColor="#fff">
        
      
    );
}
const backAction=(navigation)=>{
    console.warn('left+'+navigation.state.routeName);
    navigation.pop();
}
const appContainer =  createAppContainer(loginNav);
export default appContainer;

集成过程中的遇到的问题

1.createStackNavigator在类库react-navigation-stack中而不再react-nabigation中。所有除了导入react-navigation库，还得导入react-navigation-stack库。