react-navigation之TabNavigator使用

1、效果图：

index.android.js:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import {
  AppRegistry,
} from 'react-native';
import RecentChatsScreen from './js/RecentChatsScreen'
AppRegistry.registerComponent('GankProject', () => RecentChatsScreen);

RecentChatsScreen.js:

/**
 * Created by Administrator on 2017/3/31 0031.
 */
'use strict'
import React,{Component} from 'react';
import { TabNavigator } from "react-navigation";
import {
    AppRegistry,
    Text,
} from 'react-native';
class RecentChatsScreen extends React.Component {
    render() {
        return <Text>List of recent chats</Text>
    }
}

class AllContactsScreen extends React.Component {
    render() {
        return <Text>List of all contacts</Text>
    }
}

const MainScreenNavigator = TabNavigator({
    Recent: { screen: RecentChatsScreen },
    All: { screen: AllContactsScreen },
});
export default MainScreenNavigator;

参考资料：https://reactnavigation.org/docs/intro/nesting