ReactNative TabNavigator

TabNavigator的简单使用
1.引入 TabNavigator import {TabNavigator} from 'react-navigation'
2.创建多个组件
3.通过TabNavigator做路由映射

class RecentChatsScreen extends Component{
    render(){
        return List of recent chats
    }
}
class AllContactsScreen extends Component{
    render(){
        const {navigate} = this.props.navigation;
        return(
            
                this is a test
                navigate('Chat',{user:'Lucy'})} />
            
        );
    }
}
const MainScreentNavigator=TabNavigator({
    Recent:{screen:RecentChatsScreen},
    All:{screen:AllContactsScreen}
});

4.把RecentChatsScreen作为screen,
const SimpleApp = StackNavigator({
Main:{screen:MainScreentNavigator},
Chat:{screen:ChatScreen}
});
4.然后设置navigationOptions
所以设置导航标题
MainScreentNavigator.navigationOptions={
title:'Message',
}

示例代码：
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
    Image,
    Dimensions,
    TextInput,
    ScrollView,
    FlatList,
    SectionList,
    Button
} from 'react-native';

import {StackNavigator,TabNavigator} from 'react-navigation';

class  HomeScreen extends Component{
    static navigationOptions=({navigation}) =>({
        title:'Welcome',
        headerRight:navigation.navigate('Chat',{user:'Lucy'})} />
    });
    render(){
        const {navigate} = this.props.navigation;
        return (
        
        this is a test
            navigate('Chat',{user:'Lucy'})} />
        
                );
            }
}
class ChatScreen extends Component{
    static navigationOptions =({navigation})=>({
        title:`Chat with ${navigation.state.params.user}`,
}
);
render(){
        const {params} = this.props.navigation.state;
        return Chat with{params.user}
    }
}
class RecentChatsScreen extends Component{
    render(){
        return List of recent chats
    }
}
class AllContactsScreen extends Component{
    render(){
        const {navigate} = this.props.navigation;
        return(
            
                this is a test
                navigate('Chat',{user:'Lucy'})} />
            
        );
    }
}
const MainScreentNavigator=TabNavigator({
    Recent:{screen:RecentChatsScreen},
    All:{screen:AllContactsScreen}
});
MainScreentNavigator.navigationOptions={
    title:'Message',
}
const  SimpleApp = StackNavigator({
    Main:{screen:MainScreentNavigator},
    Chat:{screen:ChatScreen}
});

var screenWidth =Dimensions.get('window').width;
const styles = StyleSheet.create({

    container:{
        flex:1,
        marginTop:20,

    },
    text:{
        flex:1,
        justifyContent:'center',
        alignItems:'center',
        textAlign:'center',
        backgroundColor:'red',
    },

});

AppRegistry.registerComponent('AwesomeProject', () => SimpleApp);