自己做項目中的重點知識，不是教程，如果學習的話可以拿來參考。源代碼[地址][12]
[12]: https://github.com/BaiPeiHe/react-native

流程

app 從啟動到顯示主頁的流程

啟動引導流程詳解

編碼

效果：啟動 App，顯示歡迎頁面，停留幾秒鐘后顯示首頁

創建文件

|-- js
    |-- common                  可復用的組件（非完整頁面）
    |-- page                    完整頁面
        |-- setup.js
        |-- WelcomePage.js
        |-- HomePage.js

index

清理 index.js文件，在 index..js文件中將啟動頁修改為 setup，iOS 和 Android 是一樣的。

// index.ios.js 
import React, { Component } from 'react';
import {
  AppRegistry,
} from 'react-native';

import setup from './js/pages/setup'

AppRegistry.registerComponent('rn_demo', () => setup);

setup

// 創建 setup.js 文件

import React,{Component} from 'react';
import {
    View,
    StyleSheet,
    Text,
    Navigator,
} from 'react-native'

import WelcomePage from'./WelcomePage'

function setup () {
    // 進行一些初始化配置，設置根組件為 WelcomePage.js
    
    class Root extends Component{

        renderScene(route, navigator){
            let Component = route.component;

            return <Component {...route.param} navigator={navigator}/>
        }

        render(){
            return <Navigator
                initialRoute={{component:WelcomePage}}
                renderScene={(route, navigator) => this.renderScene(route,navigator)}
            />
        }
    }
    // 返回根組件
    return <Root/>
}

module.exports=setup;

WelcomePage

// WelcomePage.js

import React,{Component} from 'react';
import {
    View,
    StyleSheet,
    Text,
    Navigator
} from 'react-native'
import NavigationBar from '../common/NavigationBar'
import HomePage from './HomePage'

export default class WelcomePage extends Component{

    componentDidMount(){
        // 暫停兩秒后，重置路由指向首頁，之前的頁面都不需要了。
        this.timer = setTimeout(()=>{
            this.props.navigator.resetTo({
                component:HomePage
            })
        },2000);
    }
    // 組件取消后，取消計時器，防止組件取消后計時器還存在導致異常
    componentWillUnmount(){
        this.timer && clearTimeout(this.timer);
    }

    render(){
        return <View>
            <NavigationBar title={'歡迎'}/>

            <Text>歡迎</Text>
        </View>
    }
}

HomePage

創建包含四個 TabBar 的頁面

import React, { Component } from 'react';
import {
    StyleSheet,
    ListView,
    Image,
    Navigator,
    Text,
    View
} from 'react-native';

import TabNavigator from 'react-native-tab-navigator';

export default class HomePage extends Component {

    constructor(props){
        super(props);

        this.state={
            selectedTab: 'tb_popular',
        }
    }


    render() {
        return (
            <View style={styles.container}>
                 <TabNavigator>
                     <TabNavigator.Item
                         selected={this.state.selectedTab === 'tb_popular'}
                         selectedTitleStyle={{color:'red'}}
                         title="最熱"
                         renderIcon={() => <Image style={styles.iconImage} source={require('../../res/images/ic_polular.png')} />}
                         renderSelectedIcon={() => <Image style={[styles.iconImage,{tintColor:'red'}]} source={require('../../res/images/ic_polular.png')} />}
                         badgeText="1"
                         onPress={() => this.setState({ selectedTab: 'tb_popular' })}>
                         <View style={styles.page1}></View>
                     </TabNavigator.Item>
                     <TabNavigator.Item
                         selected={this.state.selectedTab === 'tb_trending'}
                         selectedTitleStyle={{color:'red'}}
                         title="趨勢"
                         renderIcon={() => <Image style={styles.iconImage} source={require('../../res/images/ic_trending.png')} />}
                         renderSelectedIcon={() => <Image style={[styles.iconImage,{tintColor:'red'}]} source={require('../../res/images/ic_trending.png')} />}
                         onPress={() => this.setState({ selectedTab: 'tb_trending' })}>
                         <View style={styles.page2}></View>
                     </TabNavigator.Item>
                     <TabNavigator.Item
                         selected={this.state.selectedTab === 'tb_favorite'}
                         selectedTitleStyle={{color:'red'}}
                         title="收藏"
                         renderIcon={() => <Image style={styles.iconImage} source={require('../../res/images/ic_polular.png')} />}
                         renderSelectedIcon={() => <Image style={[styles.iconImage,{tintColor:'red'}]} source={require('../../res/images/ic_polular.png')} />}
                         badgeText="1"
                         onPress={() => this.setState({ selectedTab: 'tb_favorite' })}>
                         <View style={styles.page1}></View>
                     </TabNavigator.Item>
                     <TabNavigator.Item
                         selected={this.state.selectedTab === 'tb_my'}
                         selectedTitleStyle={{color:'red'}}
                         title="我的"
                         renderIcon={() => <Image style={styles.iconImage} source={require('../../res/images/ic_trending.png')} />}
                         renderSelectedIcon={() => <Image style={[styles.iconImage,{tintColor:'red'}]} source={require('../../res/images/ic_trending.png')} />}
                         onPress={() => this.setState({ selectedTab: 'tb_my' })}>
                         <View style={styles.page2}></View>
                     </TabNavigator.Item>
                 </TabNavigator>
                
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container:{
        flex:1,
        backgroundColor: '#F5FCFF',
    },

    page1:{
        flex:1,
        backgroundColor:'red',
    },

    page2:{
        flex:1,
        backgroundColor:'yellow',
    },

    iconImage:{
        height:22,
        width:22
    }
});