【React Native】react-Navigation之StackNavigator

　　Navigator一直是被用作导航跳转的组件，但是到0.44版本后就移除，使用时需要引入react-deprecated-custom-component这个模块，但是最近使用这个模块中的Navigator组件依然出现问题，错误指向一个library文件。
　　
　　只得使用最新的导航库React-Navigation中的StackNavigator完成页面跳转。（导航库React-Navigation中有三个主要组件：StackNavigator，TabNavigator，DrawerNavigator。）
　　

引入

对于使用npm的，使用命令：　　
　　npm install react-navigation -save
对于使用yarn的，使用命令：
　　yarn add react-navigtion

然后在项目中引入组件：
　　import { StackNavigator } from ‘react-navigation’;
就可以使用StackNavigation了

demo演示　　

　　
StackNavigator的使用，先从一个Demo示例开始：

进入应用是主界面（HomeScreen），通过点击按钮进入详情页（DetailScreen），详情页将主界面中的信息显示（详情页中的price:$300是写在主界面中的数据）。

代码实现（注释解释用法）：

index.android.js:

import {
    AppRegistry,
} from 'react-native';
import rootApp from './rootApp'
AppRegistry.registerComponent('mynavigation', () => rootApp);

主要组件rootApp.js：

'use strict'
import React from 'react';
import {
    Text,View,Button,StyleSheet,
} from 'react-native';
import { StackNavigator } from 'react-navigation';
import DetailScreen from './DetailScreen';


class HomeScreen extends React.Component {
    static navigationOptions = {
        title: 'Main',//设置标题内容
    };

    render() {
        const { navigate } = this.props.navigation;
        return (
            <View>
                <Text style={styles.text}>Navigation主页面!</Text>
                <Button
                    onPress={() => navigate('Detail',{description:'price:$300'})}
                    title="GET DETAIL"/>
            </View>
        );
    }
}

const styles=StyleSheet.create({
    text:{
        margin:10,
        fontSize:18,
    }
})

//将HomeScreen和DetailScreen在StackNavigator中注册
const SimpleApp = StackNavigator({
    Home: {screen: HomeScreen},
    Detail:{screen:DetailScreen},

});

export default SimpleApp;

　　这里语句 navigate(‘Detail’,{description:’price:$300’}) 实现跳转，指跳转页面是“Detail”，而这个“Detail”在下面const SimpleApp = StackNavigator….语句中注册，就会跳转到Detail中screen指定的DetailScreen组件。

详情页：DetailScreen.js:

'use strict'

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

class DetailScreen ex Component{
    static navigationOptions = {
        //detail页面标题
        title:'detail',
    };
    render(){
        //DetailScreen页面在StackNavigator中注册过，
        // 可以通过this.props.navigation取到navigation对象，并获取params参数
        const {params} = this.props.navigation.state;
        return(
            <View>
                <Text>通过params传递来如下信息： </Text>
                <Text style={{fontSize:18}}>{params.description}</Text>
            </View>
        );
    }
}
export default DetailScreen;

　　重点在于可以通过this.props.navigation通过params取到description值来显示。

属性方法

StackNavigator属性：

上例在StackNavigator语句：

const SimpleApp = StackNavigator({
    Home: {screen: HomeScreen},
    Detail:{screen:DetailScreen},
});

中，只定义了Home，Detail这两个页面，当然还可以定义其他页面，除了定义跳转页面，还可以定义其他属性（hello老文简书-查看属性介绍）：
　　
　　 initialRouteName 默认显示界面
　 navigationOptions 屏幕导航的默认选项, 也可以在组件内用 static navigationOptions 设置(会覆盖此处的设置)
　　mode，页面切换模式, 左右是card(相当于iOS中的push效果), 上下是modal(相当于iOS中的modal效果)
　　 headerMode，导航栏的显示模式, screen: 有渐变透明效果, float: 无透明效果, none: 隐藏导航栏．
　　 onTransitionStart: ()=>{ consol log(‘导航栏切换开始’); }, 回调函数。　
　　 onTransitionEnd: ()=>{ console.log(‘导航栏切换结束’);}, 回调函数。

StackNavigator中navigationOption属性参数

title: 导航栏的标题

header: 导航栏设置对象，取值如下：
　　visible: 导航栏是否显示
　　title: 导航栏的标题, 可以是字符串也可以是个组件
　　backTitle: 左上角的返回键文字, 默认是上一个页面的title
　　right: 导航栏右按钮
　　left: 导航栏左按钮
　　style: 导航栏的style
　　titleStyle: 导航栏的title的style
　　tintColor: 导航栏颜色

cardStack: 配置cardstack
　　gesturesEnabled: 是否允许右滑返回，在iOS上默认为true，在android上默认为false.

navigation

　　在StackNavigator中注册后的组件都有navigation这个属性. navigation又有5个参数:navigate, goBack, state, setParams, dispatch, 可以在组件下console.log一下this.props就能看到.
　　更多属性和配置详细介绍：hello老文的简书博客

属性介绍，转载来源：
作者：hello老文
链接：http://www.jianshu.com/p/7d435e199c96
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

1