> 在移動app開發中，有各種形式的導航。導航組件中導航器和路由器是可以組合的，這樣就可以定制你需要的導航組件了。
### **選項卡導航**
效果截圖：
作為一個頂層導航器
嵌套在導航器中
對于頁面內組件暫時還未找到好的方法。
**1.頂層切換卡**
index.android.js
~~~
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Button
} from 'react-native';
import Tab from './tab';
class HomeScreen extends Component {
render() {
return (
<Tab />
);
}
}
AppRegistry.registerComponent('tang', () => HomeScreen);
~~~
tab.js
~~~
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Button
} from 'react-native';
import { TabNavigator,StackNavigator } from "react-navigation";
import { ChatScreen } from "./app";
class RecentChatsScreen extends React.Component {
render() {
return (
<Text>作為單獨組件123</Text>
)
}
}
class AllContactsScreen extends React.Component {
render() {
return <Text>作為單獨組件2</Text>
}
}
const MainScreenNavigator = TabNavigator({
Recent: { screen: RecentChatsScreen },
All: { screen: AllContactsScreen },
});
export default MainScreenNavigator;
~~~
**1.和導航器嵌套**
tab.js
~~~
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Button
} from 'react-native';
import { TabNavigator,StackNavigator } from "react-navigation";
import { ChatScreen } from "./app";
class RecentChatsScreen extends React.Component {
render() {
return (
<Text>作為單獨組件123</Text>
)
}
}
class AllContactsScreen extends React.Component {
render() {
return <Text>作為單獨組件2</Text>
}
}
const MainScreenNavigator = TabNavigator({
Recent: { screen: RecentChatsScreen },
All: { screen: AllContactsScreen },
});
MainScreenNavigator.navigationOptions = {
title: 'My Chats',
};
ChatScreen.navigationOptions = {
title: 'My Chats',
};
const SimpleApp = StackNavigator({
Home: { screen: MainScreenNavigator },
Chat: { screen: ChatScreen },
});
export default SimpleApp;
~~~
app.js
~~~
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Button
} from 'react-native';
export class ChatScreen extends Component {
static navigationOptions = {
title: 'Chat',
};
render() {
return (
<View>
<Text>Chat with Lucy</Text>
</View>
);
}
}
export class HelloScreen extends Component {
static navigationOptions = {
title: 'Hello',
};
render() {
return (
<View>
<Text>Hello 組件 </Text>
</View>
);
}
}
~~~
