tabbar+stackNavigator

/**

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

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Button,
} from 'react-native';
import {TabNavigator,StackNavigator} from "react-navigation";
//一个页面
class RecentChatsScreen extends React.Component {
render() {
return(
<View>
<Button onPress={()=>this.props.navigation.navigate('Chat',{user:'用户'})}
title="点击button"
>

      </Button>
      <Text>tab  --1</Text>
  </View>

);

}
}
//一个页面
class AllContactsScreen extends React.Component {
render() {
return <Text>tab --2</Text>
}
}
//一个页面
class ChatScreen extends React.Component {
render() {
return <Text>ChatScreen</Text>
}
}
//一个tab
const MainScreenNavigator = TabNavigator({
Recent: { screen: RecentChatsScreen },
All: { screen: AllContactsScreen },
});
// 一个nav 里面包含一个tab
const SimpleApp = StackNavigator({
Home: { screen: MainScreenNavigator },
Chat: { screen: ChatScreen },
});
export default class Index extends Component {
render() {
return (
<SimpleApp/>
);
}
}

// 设置两个tab的icon

MainScreenNavigator.navigationOptions= {
title:"两个tab的navigation",
};

ChatScreen.navigationOptions ={
title:"ChatScreen页面",
};

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'red',
}
});