react-native中使用react navigation

导航的代码

import React,{PureComponent,Component}from 'react';
import { StatusBar } from 'react-native'
import {Button,Image} from 'react-native';
import {createAppContainer,} from 'react-navigation'; //用于包裹路由后导出
import {createStackNavigator} from 'react-navigation-stack'
import { createDrawerNavigator } from 'react-navigation-drawer';
import {createBottomTabNavigator,createMaterialTopTabNavigator} from 'react-navigation-tabs';//底部导航及头部导航器
import Ionicons from 'react-native-vector-icons/Ionicons';//矢量图标库
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';//矢量图标库

const lightContentScenes = ['Home', 'Mine']


import HomePage from './page/HomePage'
import page1 from './page/page1'
import page2 from './page/page2'
import page3 from './page/page3'
import page4 from './page/page4'



function getCurrentRouteName(navigationState: any) {
    if (!navigationState) {
        return null
    }
    const route = navigationState.routes[navigationState.index]
    if (route.routes) {
        return getCurrentRouteName(route)
    }
    return route.routeName
}

class index extends PureComponent<{}> {
    constructor() {
        super()
        StatusBar.setBarStyle('light-content')
    }
    render() {
        return (
            <AppContainer
                onNavigationStateChange={
                    (prevState, currentState) => {
                        const currentScene = getCurrentRouteName(currentState)
                        const previousScene = getCurrentRouteName(prevState)
                        if (previousScene !== currentScene) {
                            if (lightContentScenes.indexOf(currentScene) >= 0) {
                                StatusBar.setBarStyle('light-content')
                            } else {
                                StatusBar.setBarStyle('dark-content')
                            }
                        }
                    }
                }
            />

        )
    }
}

const AppBottomNavigator =createBottomTabNavigator({
    Second: {
        screen: createStackNavigator({ Second: page2 }),
        navigationOptions: ({ navigation }) => ({

            tabBarLabel: '最近',
            tabBarIcon:({tinColor,focused})=>(
                <Ionicons
                    name={"add"}
                    size={26}
                    style={{color:tinColor}}
                />
            )

        }),
    },
    Home: {
        screen: createStackNavigator({ Home: HomePage }),
        navigationOptions: ({ navigation }) => ({
            // title:`${navigation.state.params.name}`,
            tabBarLabel: '首页',
            tabBarIcon:({tinColor,focused})=>(
                        <Ionicons
                            name={"add-circle"}
                            size={26}
                            style={{color:tinColor}}
                        />
                    )
        }),
    },
    Third: {
        screen: createStackNavigator({ Third: page3 }),
        navigationOptions: ({ navigation }) => ({
            tabBarLabel: '搜索',
            tabBarIcon:({tinColor,focused})=>(
                <Ionicons
                    name={"add-circle-outline"}
                    size={26}
                    style={{color:tinColor}}
                />
            )
        }),
    },
    Fourth: {
        screen: createStackNavigator({ Fourth: page4 }),
        navigationOptions: ({ navigation }) => ({
            tabBarLabel: '我的',
            tabBarIcon:({tinColor,focused})=>(
                <Ionicons
                    name={"airplane"}
                    size={26}
                    style={{color:'blue'}}
                />
            )
        }),
    },
}, {
    tabBarOptions:{
        // activeTintColor:Platform.OS==='ios'?'#e91e63':'fff',
    }
});
const DrawerNavigator = createDrawerNavigator({
    Feeds: AppBottomNavigator,
    Profile: ProfileScreen,
})

class ProfileScreen extends Component {
    static navigationOptions = {
        drawerLabel: 'Notifications',
        drawerIcon: ({ tintColor }) => (
            <Image
                source={require('../src/img/home/search_icon.png')}
                style={[styles.icon, { tintColor: tintColor }]}
            />
        ),
    };
    render() {
        return (
            <Button
                onPress={() => this.props.navigation.toggleDrawer()}
                title="我是第二个2"
            />
        );
    }
}

const AppTopNavigator =createMaterialTopTabNavigator({
    page1:{
        screen:page1,
        navigationOptions:{
            tabBarLabel:'ALL'//顶部导航项
        }

    },
    page2:{
        screen:page2,
        navigationOptions:{
            tabBarLabel:'IOS'//顶部导航项
        }

    },
    page3:{
        screen:page3,
        navigationOptions:{
            tabBarLabel:'React'//顶部导航项
        }

    },
    page4:{
        screen:page4,
        navigationOptions:{
            tabBarLabel:'React Native'//顶部导航项
        }

    }
},{
    tabBarOptions:{
        tabStyle:{minWidth:50,},//顶部导航项的最小宽
        upperCaseLabel:false,//是否使标签大写，默认为true
        scrollEnabled:true,//允许滑动切换标签
        style:{
            backgroundColor:"#678" //TabBar的背景色

        },
        indicatorStyle:{
            height:2,
            backgroundColor:"white",
        },//标签指示器样式
        labelStyle:{
            fontSize:13,
            marginTop:6,
            marginBottom:6,
        },//文字样式
    }
});

const AppNavigator=createStackNavigator({
    // Tab: { screen: AppBottomNavigator },
    Bottom: {
        screen: DrawerNavigator,
        navigationOptions: {
            title: 'This is Bottom'
        }
    },
    Top: {
        screen: AppTopNavigator,
        navigationOptions: {
            title: 'This is Top'
        }
    }
},{
    defaultNavigationOptions: {
        headerBackTitle: ' ',
        headerTintColor: '#333333',
        showIcon: true,
    },
});
const AppContainer = createAppContainer(AppNavigator);

export default index

　　app.js代码

import React from 'react';
import AppContainer from './src/navigators.js'//导入路由文件

export default class App extends React.Component {
    render() {
        return <AppContainer />;
    }
}

　　注意：使用路由导航组件引入时，如 navigators.js中输出为组件。

index.js代码

/**
 * @format
 */

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import RootScene from './src/navigators'

AppRegistry.registerComponent(appName, () => RootScene);

　　过程中碰到的问题：

1.第三方图标引入进去，显示不对      解决方法： yarn add react-native-vetor-icons     react-native link react-native-vetor-icons

2.出现8081端口一直占用     解决方法：在终端中输入 netstat -nao|findstr '8081'查找所占用的进程，然后强制关闭   taskkill /f /PID  进程的编号。

抽屉导航，不知如何调用出来，后边使用则具体情况具体使用