ReactNative TabNavigator

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

class RecentChatsScreen extends Component{
    render(){
        return <Text>List of recent chats</Text>
    }
}
class AllContactsScreen extends Component{
    render(){
        const {navigate} = this.props.navigation;
        return(
            <View>
                <Text>this is a test</Text>
                <Button title="chat with lucy" onPress={()=>navigate('Chat',{user:'Lucy'})} />
            </View>
        );
    }
}
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:<Button title="Right" onPress={()=>navigation.navigate('Chat',{user:'Lucy'})} />
    });
    render(){
        const {navigate} = this.props.navigation;
        return (
        <View>
        <Text>this is a test</Text>
            <Button title="chat with lucy" onPress={()=>navigate('Chat',{user:'Lucy'})} />
        </View>
                );
            }
}
class ChatScreen extends Component{
    static navigationOptions =({navigation})=>({
        title:`Chat with ${navigation.state.params.user}`,
}
);
render(){
        const {params} = this.props.navigation.state;
        return <Text>Chat with{params.user}</Text>
    }
}
class RecentChatsScreen extends Component{
    render(){
        return <Text>List of recent chats</Text>
    }
}
class AllContactsScreen extends Component{
    render(){
        const {navigate} = this.props.navigation;
        return(
            <View>
                <Text>this is a test</Text>
                <Button title="chat with lucy" onPress={()=>navigate('Chat',{user:'Lucy'})} />
            </View>
        );
    }
}
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);