/**
- 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',
}
});
