1.9 项目启动引导流程实现

自己做项目中的重点知识，不是教程，如果学习的话可以拿来参考。源代码[地址][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
    }
});