react-navigation 导航路由

Posted hai-cheng

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react-navigation 导航路由相关的知识,希望对你有一定的参考价值。

 

1,首先,下载,安装,引入react-navigation

 npm install --save react-navigation   

 或者

    yarn add react-navigation

 

StackNavigator类似顶部导航条,用来跳转页面和传递参数。
TabNavigator类似底部标签栏,用来区分模块。
DrawerNavigator抽屉,类似从App左侧滑出一个页面。

 

2,在根目录创建一个文件夹 router ,里边分别创建三个js文件 
index.js , navConfig.js , routeConfig.js 

index.js  代码如下:import React, { Component } from ‘react‘;

import { Text, View, AppRegistry } from ‘react-native‘;
import {StackNavigator, TabBarBottom, TabNavigator} from "react-navigation";

import RouteConfigs from ‘./routeConfig‘
import StackNavigatorConfig from ‘./navConfig‘

const Navigator
= StackNavigator(RouteConfigs, StackNavigatorConfig); export default class MainComponent extends Component { render() { return ( <Navigator/> ) }; } AppRegistry.registerComponent(‘reactNative‘, () => MainComponent );

navConfig.js  代码如下:

import React, { Component } from ‘react‘;
import { Text, View } from ‘react-native‘;
import {StackNavigator, TabBarBottom, TabNavigator} from "react-navigation";
import CardStackStyleInterpolator from ‘react-navigation/src/views/CardStack/CardStackStyleInterpolator‘;

const StackNavigatorConfig = {
    initialRouteName: ‘Tabbar‘,  //指向tabbar,固配置tabbar
    initialRouteParams: {initPara: ‘初始页面参数‘},
    navigationOptions: {
        // title: ‘‘,
        // headerTitleStyle: {fontSize: 18, color: ‘#666666‘},
        // headerStyle: {height: 48, backgroundColor: ‘#FFF‘},
    },
    // paths: ‘page/main‘,
    mode: ‘card‘,
    headerMode: ‘screen‘,
    cardStyle: {backgroundColor: "#ffffff"},
    transitionConfig: (() => ({
        screenInterpolator: CardStackStyleInterpolator.forHorizontal,
    })),
    onTransitionStart: (() => {
        console.log(‘页面跳转动画开始‘);
    }),
    onTransitionEnd: (() => {
        console.log(‘页面跳转动画结束‘);
    }),
};

export default StackNavigatorConfig;

// initialRouteName - 导航器组件中初始显示页面的路由名称,如果不设置,则默认第一个路由页面为初始显示页面
// initialRouteParams - 给初始路由的参数,在初始显示的页面中可以通过 this.props.navigation.state.params 来获取
// navigationOptions - 路由页面的配置选项,它会被 RouteConfigs 参数中的 navigationOptions 的对应属性覆盖。
// paths - 路由中设置的路径的覆盖映射配置
// mode - 页面跳转方式,有 card 和 modal 两种,默认为 card :
// card - 原生系统默认的的跳转
// modal - 只针对ios平台,模态跳转
// headerMode - 页面跳转时,头部的动画模式,有 float 、 screen 、 none 三种:
// float - 渐变,类似iOS的原生效果
// screen - 标题与屏幕一起淡入淡出
// none - 没有动画
// cardStyle - 为各个页面设置统一的样式,比如背景色,字体大小等
// transitionConfig - 配置页面跳转的动画,覆盖默认的动画效果
// onTransitionStart - 页面跳转动画即将开始时调用
// onTransitionEnd - 页面跳转动画一旦完成会马上调用

routeConfig.js   代码如下:

import React, { Component } from ‘react‘;
import { Text, View, StyleSheet, Image } from ‘react-native‘;
import {StackNavigator, TabBarBottom, TabNavigator} from "react-navigation";

// 导入所有组件(包括tabbar映射的组件)
import Home from ‘../demoPage/home‘;
import News from ‘../demoPage/news‘;
import My from ‘../demoPage/my‘;
import Page4 from ‘../demoPage/page4‘;  //其它组件(非 tabbar)

// tabbar路由配置
const Tabbar = TabNavigator({
    /**
        screen:和导航的功能是一样的,对应界面名称,可以在其他页面通过这个screen传值和跳转。  
        navigationOptions:配置TabNavigator的一些属性  
        title:标题,会同时设置导航条和标签栏的title  
        tabBarVisible:是否隐藏标签栏。默认不隐藏(true)  
        tabBarIcon:设置标签栏的图标。需要给每个都设置  
        tabBarLabel:设置标签栏的title。推荐  
     */
    Home: { 
        screen: Home ,
        navigationOptions: ({navigation}) => ({
            /**
             * tabBarLabel tabbar名称
             */
            tabBarLabel:‘首页‘, 
            tabBarIcon: ({focused,tintColor}) => (
                /**
                 * focused属性 选中渲染的图片
                 */
                focused ? <Image style={styles.icon} source={require(‘../image/index.png‘)} /> : <Image style={styles.icon} source={require(‘../image/tab_btn_home.png‘)} />
            )  
        })
    },
    News: { 
        screen: News,
        navigationOptions: ({navigation}) => ({
            tabBarLabel:‘消息‘, 
            tabBarIcon: ({focused,tintColor}) => (
                focused ? <Image style={styles.icon} source={require(‘../image/tab_btn_classification_hl.png‘)} /> : <Image style={styles.icon} source={require(‘../image/tab_btn_classification.png‘)} />
            )  
        })
    },
    My: { 
        screen: My,
        navigationOptions: ({navigation}) => ({
            tabBarLabel:‘我的‘, 
            tabBarIcon: ({focused,tintColor}) => (
                focused ? <Image style={styles.icon} source={require(‘../image/tab_btn_user_hl.png‘)} /> : <Image style={styles.icon} source={require(‘../image/tab_btn_user.png‘)} />
            )  
        })
    },
},{
    tabBarComponent:TabBarBottom,
    tabBarPosition: ‘bottom‘,
    initialRouteName: ‘Home‘,
    showIcon:‘true‘
    /**
        导航栏配置  
        tabBarPosition:设置tabbar的位置,iOS默认在底部,安卓默认在顶部。(属性值:‘top‘,‘bottom‘)  
        swipeEnabled:是否允许在标签之间进行滑动  
        animationEnabled:是否在更改标签时显示动画  
        lazy:是否根据需要懒惰呈现标签,而不是提前,意思是在app打开的时候将底部标签栏全部加载,默认false,推荐为true  
        trueinitialRouteName: 设置默认的页面组件  
        backBehavior:按 back 键是否跳转到第一个Tab(首页), none 为不跳转  
        tabBarOptions:配置标签栏的一些属性iOS属性  
        activeTintColor:label和icon的前景色 活跃状态下  
        activeBackgroundColor:label和icon的背景色 活跃状态下  
        inactiveTintColor:label和icon的前景色 不活跃状态下  
        inactiveBackgroundColor:label和icon的背景色 不活跃状态下  
        showLabel:是否显示label,默认开启 style:tabbar的样式  
        labelStyle:label的样式安卓属性  
        activeTintColor:label和icon的前景色 活跃状态下  
        inactiveTintColor:label和icon的前景色 不活跃状态下  
        showIcon:是否显示图标,默认关闭  
        showLabel:是否显示label,默认开启 style:tabbar的样式  
        labelStyle:label的样式 upperCaseLabel:是否使标签大写,默认为true  
        pressColor:material涟漪效果的颜色(安卓版本需要大于5.0)  
        pressOpacity:按压标签的透明度变化(安卓版本需要小于5.0)  
        scrollEnabled:是否启用可滚动选项卡 tabStyle:tab的样式  
        indicatorStyle:标签指示器的样式对象(选项卡底部的行)。安卓底部会多出一条线,可以将height设置为0来暂时解决这个问题  
        labelStyle:label的样式  
        iconStyle:图标样式  
     */

}) 

// 整个app路由配置 const RouteConfigs = { // 导入tabbar路由配置 Tabbar: { screen: Tabbar, }, // 下边是其它组件路由配置 (非tabbar) Page4: { screen: Page4, navigationOptions: ({navigation}) => ({ title: ‘Page4页面‘, }), }, }; // 样式 const styles = StyleSheet.create ({ icon: { width:20, height:20 } }) export default RouteConfigs; // ********************************* navigationOptions属性 **************************************************************** // title: ‘首页‘, // header - 自定义的头部组件,使用该属性后系统的头部组件会消失 // headerTitle - 头部的标题,即页面的标题 // headerBackTitle - 返回标题,默认为 title // headerTruncatedBackTitle - 返回标题不能显示时(比如返回标题太长了)显示此标题,默认为 “Back” // headerRight - 头部右边组件 // headerLeft - 头部左边组件 // headerStyle - 头部组件的样式 // headerTitleStyle - 头部标题的样式 // headerBackTitleStyle - 头部返回标题的样式 // headerTintColor - 头部颜色 // headerPressColorandroid - Android 5.0 以上MD风格的波纹颜色 // gesturesEnabled - 否能侧滑返回, iOS 默认 true , Android 默认 false

 

以上是关于react-navigation 导航路由的主要内容,如果未能解决你的问题,请参考以下文章

ReactNative入门——导航和路由

ReactNative入门——导航和路由

ReactNative入门——导航和路由

ReactNative入门——导航和路由

ReactNative进阶:导航组件react-navigation

React Navigation 路由导航库升级 5.x