在移动app开发中，有各种形式的导航。导航组件中导航器和路由器是可以组合的，这样就可以定制你需要的导航组件了。

选项卡导航

效果截图：
作为一个顶层导航器

_ZOKLTB$)94_%N9PD5Q9P{A.png

嵌套在导航器中

J~%T{K7MW%~4HYZTXT)D(FC.png

对于页面内组件暂时还未找到好的方法。

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>
    );
  }
}