【React Native开发】- React Navigation的使用

1.介绍

react-navigation库包含三个组件：

 - StackNavigator:用来跳转页面和传递参数；

 - TabNavigation:类似底部导航栏，在同一屏幕下，切换不同的页面；

 - DrawerNavigator:侧滑菜单导航栏，设置带抽屉的导航菜单。

2.React-Navigation的使用

2.1 StackNavigator的属性

 - navigationOptions属性：配置stackNavigator的属性

   参数：

           title:标题，设置属性使得导航栏和标题栏的标题一样，不推荐使用；

            visible:导航栏是否显示；

            headerTitle:导航栏的标题，推荐；

            headerBackTitle:左上角返回键的文字，默认上一个页面的title；

            headerTruncatedBackTitle:设置当上一个页面不符合返回箭头文字时，默认‘返回’；

            headerRight:导航栏右侧按钮，可以是按钮或是其他组件；

            headerLeft:导航栏左侧按钮，可以是按钮或是其他组件；

            headerStyle:导航栏的样式；

            headerTitleStyle:导航栏title标题的样式；

            headerBackTitleStyle:导航栏返回文字样式；

            headerTintColor:导航栏颜色；

            headerPressColorAndroid:设置颜色纹理，安卓独有；

            gesturesEnabled:是否允许右滑返回，ios默认true，android默认false;

 - screen:对应界面名称，需要填入import之后的页面；

 - stackNavigatorConfig:

   参数：

           initialRouteName:设置默认的页面组件，必须是上面已经注册的页面；

           initialRouteParams:初始路由的参数；

           navigationOptions:屏幕导航的默认选项；

           paths:RouteConfigs中路径设置的映射；

           mode:页面切换的模式，定义跳转风格；

                 card:普通app常用的左右切换模式，ios和android默认的效果；

                    model:上下切换；

            headerMode: 导航栏的显示模式，返回上一级时的动画效果；

                   float:无透明状态，ios默认的效果；

                     screen:有渐变透明状态；

                     none:隐藏导航栏，无动画；

            cardStyle:自定义设置跳转效果；

            transitionConfig:自定义设置滑动返回的配置；

            onTransitionStart:当转换动画即将开始的时候被调用；

            onTransitionEnd:当转换动画结束的时候被调用；

2.2 TabNavigator的属性

2.3 DrawerNavigator的属性

3.React-Navigation实例

3.1 StackNavigator的实例

3.1.1 属性基本设置

import {AppRegistry} from 'react-native';
import {StackNavigator} from 'react-navigation';

import MainScreen from './StackNavigator/Main/MainScreen'
import MessageScreen from './StackNavigator/Message/MessageScreen'
import MyScreen from './StackNavigator/My/MyScreen'
//StackNavigator
const SNavigator = StackNavigator({
    Main:{
        screen:MainScreen,
        navigationOptions:{
            headerTitle:'首页',
            headerTitleStyle:{color:'#000',fontSize:15},
            headerStyle:{backgroundColor:'#fff'},
            gesturesEnabled:true,//是否允许右滑返回，ios默认true，android默认false;
        },
    },
    Message:{
        screen:MessageScreen,
        navigationOptions:'',//此处设置了, 会覆盖组件内的`static navigationOptions`设置
    },
    My:{screen:MyScreen},
},{
    initialRouteName:'Main',//默认显示的页面
    mode:'card',//页面切换的模式，定义跳转风格,左右card，上下model
    headerMode:'screen',//导航栏的显示模式, screen: 有渐变透明效果, float: 无透明效果, none: 隐藏导航栏
})
AppRegistry.registerComponent('ImageDemo', () => SNavigator);

MainScreen.js代码：
import React,{Component} from 'react'
import {
    StyleSheet,
    View,
    Text,
} from 'react-native'
export default class MainScreen extends Component{
    constructor(props){
        super(props)
    }
    render(){
        return (
            <View style={styles.container}>
                <Text>MainScreen</Text>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container:{
        flex:1,
    },
})
效果：

3.1.2 页面的跳转页传值

import {AppRegistry} from 'react-native';
import {StackNavigator} from 'react-navigation';

import MainScreen from './StackNavigator/Main/MainScreen'
import MessageScreen from './StackNavigator/Message/MessageScreen'
import MyScreen from './StackNavigator/My/MyScreen'

//StackNavigator
const SNavigator = StackNavigator({
    Main:{
        screen:MainScreen,
        navigationOptions:{},
    },
    Message:{
        screen:MessageScreen,
        navigationOptions:{},//此处设置了, 会覆盖组件内的`static navigationOptions`设置
    },
    My:{screen:MyScreen},
},{
    initialRouteName:'Main',//默认显示的页面
    mode:'card',//页面切换的模式，定义跳转风格,左右card，上下model
    headerMode:'screen',//导航栏的显示模式, screen: 有渐变透明效果, float: 无透明效果, none: 隐藏导航栏
})
AppRegistry.registerComponent('ImageDemo', () => SNavigator);

MainScreen.js代码：
import React,{Component} from 'react'
import {
    StyleSheet,
    View,
    Text,
} from 'react-native'
import Images from '../resource/images'
import TitleBar from '../components/TitleBar'
export default class MainScreen extends Component{
    constructor(props){
        super(props)
    }
    render(){
        return (
            <View style={{flex:1}}>
                <TitleBar
                    title='首页'
                    rightIcon={Images.ic_notification}
                    leftPress={() => {
                        }}
                    rightPress={() => {
                            this._navigateToScreen('Message');
                        }}></TitleBar>
                <View style={styles.container}>
                    <Text>首页</Text>
                </View>
            </View>
        )
    }
    _navigateToScreen(screen){
        const {navigate} = this.props.navigation
        navigate(screen)
    }
}
const styles = StyleSheet.create({
    container:{
        flex:1,
        justifyContent:'center',
        alignItems:'center',
    },
})
images.js图片资源：
const images = {
    ic_back:require('./imgs/back.png'),
    ic_notification:require('./imgs/notifications.png'),
}
export default images

TitleBar.js代码：
import React,{Component,PropTypes} from 'react'
import {
    StyleSheet,
    Text,
} from 'react-native'
import ImageButton from './ImageButton'
import {Header,Body,Title,Left,Right} from 'native-base'
export default class TitleBar extends Component{
    constructor(props){
        super(props)
    }
    static propsType={
        title:React.PropTypes.string,
        leftIcon:React.PropTypes.number,
        rightIcon:React.PropTypes.number,
        rightTitle:React.PropTypes.string,
        rightPress:React.PropTypes.func,
        leftPress:React.PropTypes.func,
    }
    render(){
        return (
            <Header style={{backgroundColor:'#fff'}}>
                <Left>
                    <ImageButton
                        style={styles.image_header_left}
                        source={this.props.leftIcon}
                        onPress={this.props.leftPress}>
                    </ImageButton>
                </Left>
                <Body>
                <Title style={{color:'#000'}}>
                    {this.props.title}
                </Title>
                </Body>
                <Right>
                    {this._renderRight()}
                </Right>
            </Header>
        )
    }
    /**
     * 根据传入值判断右边渲染文字还是图标
     */
    _renderRight(){
        if(this.props.rightIcon){
            return (
                <ImageButton
                    style={styles.image_header_right}
                    source={this.props.rightIcon}
                    onPress={this.props.rightPress}
                />
            )
        }else if (this.props.rightTitle){
            return (
                <Text style={styles.text_right_title}>
                    {this.props.rightTitle}
                </Text>
            )
        }
    }
}
ImageButton.js代码(图片按钮):
import React,{Component} from 'react'
import {
    Image,
    TouchableWithoutFeedback,
} from 'react-native'
export default class ImageButton extends Component{
    constructor(props){
        super(props)
    }
    render(){
        return (
            <TouchableWithoutFeedback onPress={this.props.onPress}>
                <Image
                    style={this.props.style}
                    source={this.props.source}>
                    {this.props.children}
                </Image>
            </TouchableWithoutFeedback>
        )
    }
}
效果：(点击右侧消息按钮跳转到消息页面，点击消息的回退按钮，返回到上一页面)
      

3.2 TabNavigator的实例

3.3 DrawerNavigator的实例