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(

tab --1
);

}
}
//一个页面
class AllContactsScreen extends React.Component {
render() {
return tab --2
}
}
//一个页面
class ChatScreen extends React.Component {
render() {
return ChatScreen
}
}
//一个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 (

);
}
}

// 设置两个tab的icon

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

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

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

你可能感兴趣的:(tabbar+stackNavigator)