> 在移动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>
);
}
}
~~~
