react-navigation基本使用

0.44+版本 facebook主推的一个单独的导航库react-navigation，适用于iOS&Android

使用步骤 在你的工程目录下

yarn add react-navigation

废话不多少 先看效果图

hah.gif
444.gif

代码:
index.ios.js

import {
    AppRegistry,
} from 'react-native';

let  MainApp= require('./components/App');
AppRegistry.registerComponent('NavTest', () => MainApp);

index.android.js

import {
    AppRegistry,
} from 'react-native';

let  MainApp= require('./components/App');
AppRegistry.registerComponent('NavTest', () => MainApp);

App.js

/**
 * Created by long on 2017/8/12.
 */
import React,{Component} from 'react';

import {
    View,
    StyleSheet,
    Platform,
    Text,
} from 'react-native';

import { StackNavigator}  from 'react-navigation';


import SecondPage  from './SecondPage';

class RootView extends Component{
    static navigationOptions ={
        title:"首页",
        headerTitleStyle:{
            alignSelf:'center', //设置导航条文字样式。iOS默认 安卓上如果要设置文字居中，只要添加alignSelf:'center'就可以了
        },
        gesturesEnabled:true,
    };

    render(){
        const { navigate } = this.props.navigation;

        return(
            <View style={[styles.container]}>
                <Text style={styles.text} onPress={this.pressNetPage.bind(this,navigate)}>你好{Platform.OS == 'ios' ? 'iOS' : 'Android'}</Text>

            </View>

            );
    }

    pressNetPage(navigate){
        // alert('哈哈哈s');
        navigate(
            'SecondPage',
            {passTitle:'哈哈哈哈哈 前往后传值'}
        )

    };
}

// 使用的两个跳转的页面需要在StackNavigator进行注册;
const  MainApp = StackNavigator({
    RootView:{
        screen:RootView,
    },
    SecondPage:{
        screen:SecondPage,
        navigationOptions:{
            gesturesEnabled:true,
            headerTitleStyle:{
                alignSelf:'center',//设置导航条文字样式。iOS默认 安卓上如果要设置文字居中，只要添加alignSelf:'center'就可以了
            },
        },

    },

});

const styles = StyleSheet.create({
    container:{
        flex:1,
        justifyContent:'center',
        alignItems:'center',
        ...Platform.select({
            ios:{
                backgroundColor:'cyan',
            },
            android:{
                backgroundColor:'yellow',
            }
    }),
    },

    text:{
        fontSize:18,
    }

});

module.exports = MainApp;

SecondPage

/**
 * Created by long on 2017/8/12.
 */


import React, {Component} from 'react';

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

class SecondPage extends Component{

    // static navigationOptions = {
    //     title: '第二页',
    //     gesturesEnabled:true,
    //     headerTitleStyle:{
    //         alignSelf:'center',//设置导航条文字样式。iOS默认 安卓上如果要设置文字居中，只要添加alignSelf:'center'就可以了
    //     },
    // };

    static navigationOptions = ({navigation}) =>({
        title:`${navigation.state.params.passTitle}`,
    });

    render(){
        const { params } = this.props.navigation.state;
        return(
            <View style={styles.container}>
                <Text onPress={this.back.bind(this)}>{params.passTitle}</Text>
            </View>
        );
    }

    back(){
        this.props.navigation.goBack();//返回上一页
    };
}
const styles = StyleSheet.create({
    container:{
        flex:1,
        justifyContent:'center',
        alignItems:'center',
        backgroundColor:'yellow',
    }
});

module.exports = SecondPage;

参考资料:
http://www.jianshu.com/p/2f575cc35780
http://blog.csdn.net/xiangzhihong8/article/details/71249167?ref=myread
http://reactnative.cn/docs/0.43/navigation.html