RN react-navigation使用

原创 2018年04月16日 10:57:34

一、命令安装

npm install react-navigation --save

该库包含三类组件:

(1)StackNavigator:用来跳转页面和传递参数

(2)TabNavigator:类似底部导航栏,用来在同一屏切换不同页面

(3)DrawerNavigator:侧滑菜单导航栏,用于轻松设置带抽屉的屏幕

二、react-navigation

1、StackNavigator属性介绍

navigationOptions:配置StackNavigator的一些属性。

    title:标题,如果设置了这个导航栏和标签栏的title就会变成一样的,不推荐使用
    header:可以设置一些导航的属性,如果隐藏顶部导航栏只要将这个属性设置为null
    headerTitle:设置导航栏标题,推荐
    headerBackTitle:设置跳转页面左侧返回箭头后面的文字,默认是上一个页面的标题。可以自定义,也可以设置为null
    headerTruncatedBackTitle:设置当上个页面标题不符合返回箭头后的文字时,默认改成"返回"
    headerRight:设置导航条右侧。可以是按钮或者其他视图控件
    headerLeft:设置导航条左侧。可以是按钮或者其他视图控件
    headerStyle:设置导航条的样式。背景色,宽高等
    headerTitleStyle:设置导航栏文字样式
    headerBackTitleStyle:设置导航栏‘返回’文字样式
    headerTintColor:设置导航栏颜色
    headerPressColorAndroid:安卓独有的设置颜色纹理,需要安卓版本大于5.0
    gesturesEnabled:是否支持滑动返回手势,iOS默认支持,安卓默认关闭
 

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

mode:定义跳转风格

   card:使用iOS和安卓默认的风格

   modal:iOS独有的使屏幕从底部画出。类似iOS的present效果

headerMode:返回上级页面时动画效果

   float:iOS默认的效果

   screen:滑动过程中,整个页面都会返回

   none:无动画

cardStyle:自定义设置跳转效果

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

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

   onTransitionEnd:当转换动画完成,将被调用的功能

path:路由中设置的路径的覆盖映射配置

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

initialRouteParams:初始路由参数
StackNavigator(RouteConfigs, StackNavigatorConfig)
// 注册导航
const Navs = StackNavigator({
    Home: { screen: Tabs },
    HomeTwo: {
        screen: HomeTwo,  // 必须, 其他都是非必须
        path:'app/homeTwo', 使用url导航时用到, 如 web app 和 Deep Linking
        navigationOptions: {}  // 此处设置了, 会覆盖组件内的`static navigationOptions`设置. 具体参数详见下文
    },
    HomeThree: { screen: HomeThree },
    HomeFour: { screen: HomeFour }
}, {
    initialRouteName: 'Home', // 默认显示界面
    navigationOptions: {  // 屏幕导航的默认选项, 也可以在组件内用 static navigationOptions 设置(会覆盖此处的设置)
     headerTitle: "首页",//导航栏标题
     headerBackTitle: null,//设置跳转页面左侧返回箭头后面的文字,默认是上一个页面的标题。可以自定义,也可以设置为null
     headerTintColor: "#333",//设置导航栏颜色
        cardStack: {
            gesturesEnabled: true//是否允许右滑返回,在iOS上默认为true,在Android上默认为false
        }
    }, 
    mode: 'card',  // 页面切换模式, 左右是card(相当于iOS中的push效果), 上下是modal(相当于iOS中的modal效果)
    headerMode: 'screen', // 导航栏的显示模式, screen: 有渐变透明效果, float: 无透明效果, none: 隐藏导航栏
    onTransitionStart: ()=>{ console.log('导航栏切换开始'); },  // 页面切换开始时的回调函数
    onTransitionEnd: ()=>{ console.log('导航栏切换结束'); }  // 页面切换结束时的回调函数
});
如果在StackNavigatorConfig里面配置了navigationOptions的一下参数,这些参数会作用与RouteConfigs里面的所有路由的子页面,如果路由子页面里面设置了static navigationOptions那么会覆盖此处配置的全局参数

2、TabNavigator属性介绍

screen:和导航的功能是一样的,对应界面名称,可以在其他页面通过这个screen传值和跳转。


navigationOptions:配置TabNavigator的一些属性

title:标题,会同时设置导航条和标签栏的title

tabBarVisible:是否隐藏标签栏。默认不隐藏(true)

tabBarIcon:设置标签栏的图标。需要给每个都设置

tabBarLabel:设置标签栏的title。推荐

导航栏配置

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:图标样式

3、DrawerNavigator属性介绍

 DrawerNavigatorConfig

     drawerWidth - 抽屉的宽度
     drawerPosition - 选项是左或右。 默认为左侧位置
     contentComponent - 用于呈现抽屉内容的组件,例如导航项。 接收抽屉的导航。 默认为DrawerItems
     contentOptions - 配置抽屉内容

     initialRouteName - 初始路由的routeName
     order - 定义抽屉项目顺序的routeNames数组。
     路径 - 提供routeName到路径配置的映射,它覆盖routeConfigs中设置的路径。
     backBehavior - 后退按钮是否会切换到初始路由? 如果是,设置为initialRoute,否则为none。 默认为initialRoute行为

    DrawerItems的contentOptions属性

     activeTintColor - 活动标签的标签和图标颜色
     activeBackgroundColor - 活动标签的背景颜色
     inactiveTintColor - 非活动标签的标签和图标颜色
     inactiveBackgroundColor - 非活动标签的背景颜色
     内容部分的样式样式对象
     labelStyle - 当您的标签是字符串时,要覆盖内容部分中的文本样式的样式对象

4、使用StackNavigator + TabNavigator实现Tab界面切换、界面间导航

1>首先导入必要组件(包含导航路由)

import { StackNavigator, TabNavigator, TabBarBottom } from "react-navigation";
import Home from "./category/Home";
import Feedback from "./category/feedback/feedback";
import Task from "./category/task/taskHome";

2>定义TabNavigator

const MyTab = TabNavigator(
    {
        Home: {
            screen: Home,
            navigationOptions: ({ navigation }) => ({
                headerTitle: "首页",
                tabBarLabel: "首页",
                headerBackTitle: null,
                tabBarIcon: ({ tintColor }) => (
                    <Image
                        style={styles.imageStyle}
                        source={
                            tintColor == "#ff552e"
                                ? require("./img/yingxiao/ac-jingxuan.png")
                                : require("./img/yingxiao/jingxuan.png")
                        }
                    />
                )
            })
        },
        Feed: {
            screen: Feedback,
            navigationOptions: ({ navigation }) => ({
                headerTitle: "意见反馈",
                tabBarLabel: "我的",
                headerBackTitle: null,
                headerRight: (
                    <Text
                        style={{ color: "#333", marginRight: 14, fontSize: 16 }}
                        onPress={() =>
                            navigation.state.params ? navigation.state.params.submit() : null
                        }>
                        提交
                    </Text>
                ),
                tabBarIcon: ({ tintColor }) => (
                    <Image
                        style={styles.imageStyle}
                        source={
                            tintColor == "#ff552e"
                                ? require("./img/yingxiao/ac-laidiantong.png")
                                : require("./img/yingxiao/laidiantong.png")
                        }
                    />
                )
            })
        }
    },
    {
        tabBarComponent: TabBarBottom,
        tabBarPosition: "bottom", //设置tabbar的位置,iOS默认在底部,安卓默认在顶部。(属性值:'top','bottom')
        swipeEnabled: true, //是否允许在标签之间滑动
        animationEnabled: false, //是否在更改标签时显示动画
        lazy: true, //是否根据需要懒惰呈现标签,而不是提前制作,意思是在app打开的时候将底部标签栏全部加载,默认false,推荐改成true
        tabBarOptions: {
            activeTintColor: "#ff552e", //label和icon的前景色 活跃状态下(选中)
            // activeBackgroundColor:'blue',//label和icon的背景色 活跃状态下
            inactiveTintColor: "#333", //label和icon的前景色 不活跃状态下
            showLabel: true, //是否显示label,默认开启
            showIcon: true, // android 默认不显示 icon, 需要设置为 true 才会显示
            style: { backgroundColor: "#ffffff" }, //tabbar的样式
            labelStyle: {
                fontSize: 14 // 文字大小
            }
        }
    }
);

3>定义StackNavigator

效果图:

const AppIndex = StackNavigator({
    Main: {
        screen: MyTab
    },    
Task: {
        screen: Task,
        navigationOptions: {
            headerBackTitle: null
        }
    }
});



任务系统导航跳转到任务首页:



难点:导航右侧配置按钮:

headerRight:设置导航条右侧。可以是按钮或者其他视图控件
使用react-navigation时,单页面设置navigationOptions中,进行Static中调用方法,不能像以下设置

onPress = {()=>this.share()}

static navigationOptions = ({ navigation }) => ({
        title: `${navigation.state.params.title}`,
        headerBackTitle: `${navigation.state.params.title}`,
        headerRight: (
            <View style={{ flexDirection: "row" }}>
                <Text
                    style={{ color: "#333", marginRight: 13 }}
                    // static里面不能使用this调用方法,出现share is not function
                    onPress={()=>this.share()
                    }>
                    分享
                </Text>
                
            </View>
        )
    });
解决办法:
//右侧配置两个按钮
static navigationOptions = ({ navigation }) => ({
        title: `${navigation.state.params.title}`,
        headerBackTitle: `${navigation.state.params.title}`,
        headerRight: (
            <View style={{ flexDirection: "row" }}>
                <Text
                    style={{ color: "#333", marginRight: 13 }}
                    onPress={() =>
                        navigation.state.params ? navigation.state.params.share() : null
                    }>
                    分享
                </Text>
                <Text
                    style={{ color: "#333", marginRight: 13 }}
                    onPress={() =>
                        navigation.state.params ? navigation.state.params.jumpToRule() : null
                    }>
                    兑换规则
                </Text>
            </View>
        )
    });

例如分享:

首先在本类中声明一个share(){

}的方法

页面挂载完成在componentDidMount里面设置navigation的setParams把方法注入到navigation中去

componentDidMount() {
        // 通过在componentDidMount里面设置setParams
        this.props.navigation.setParams({
            share: this.share
        });
    }

然后点击时直接在navigation中寻找刚刚注入的放置直接调用

onPress={() =>
                        navigation.state.params ? navigation.state.params.share() : null
                    }

本人开发中最初的处理方式:

把导航里面配置的按钮需要调用的本类函数放到window全局对象下面,然后在全局里面寻找调用






react-navigation重复点击多次跳转的解决方案

废话 在react-native@0.44版本之后,官方废弃了之前的导航Navigator,用react-navigation 替代 react-natvigation于2017年1月份开源,在3...
  • shiquanqq
  • shiquanqq
  • 2018-01-19 23:23:58
  • 762

关于动态修改react-navigation各种属性方式

这几天一直在弄动态修改react-navigation的各种属性的方法,想做成额效果如下: 上面是有一个导航栏的,然后导航栏上面有两个view,就是左边的定位和右边的搜索,然后导航栏的透明度可以动态...
  • u010101051
  • u010101051
  • 2017-09-14 19:09:07
  • 2468

官方推荐react-navigation的使用

看了官方文档的导航器对比,发现现在主推的方案是一个单独的导航库react-navigation,据说它的使用十分简单。我就写个demo,试了一下。 一、主要构成 按使用形式主要分三部分: ...
  • sinat_17775997
  • sinat_17775997
  • 2017-04-27 17:29:42
  • 13938

react navigation的学习与使用

在很久之前,RN中文网说推荐用react-navigation替代navigator作为新的导航库,从RN 0.43版本开始,官方就已经停止维护Navigator了,所以强烈建议大家迁移到新的reac...
  • u011272795
  • u011272795
  • 2017-06-04 00:03:33
  • 6109

react-navigation使用心得

react-navigation使用心得官网地址:https://reactnavigation.org一、主要构成:(1) StackNavigator: 类似于普通的Navigator,屏幕上方导...
  • zramals
  • zramals
  • 2017-06-15 16:45:44
  • 4481

React Navigation 自认比较好的navigator组件(一)

#更新: 最近react-navigation 更新到了1.0.0 beta9 版本,好多东西已经更改了,建议大家去github寻找最新的信息。下面的老版本就做个参考吧。http://www.jian...
  • sinat_17775997
  • sinat_17775997
  • 2017-05-08 22:27:00
  • 1372

React Native未来导航者:react-navigation 使用详解

上篇博客和大家分享了关于React Native jsBundle预加载,界面启动优化的内容,详情可点击: 转自:http://blog.csdn.net/u013718120/article/de...
  • sinat_17775997
  • sinat_17775997
  • 2017-05-21 11:58:01
  • 9966

rn+redux+immutable+saga+react-navigation技术栈

1:安装组件package如下:"dependencies": { "immutable": "^3.8.2", "react": "16.0.0-beta.5", ...
  • u014041033
  • u014041033
  • 2017-11-28 15:43:02
  • 275

React-navigation StackNavigator 使用攻略

目前的项目迭代进展到使用navigation来串联不同的screen,但是在涉及到对navigationOptions进行定制的时候由于版本的问题,网上的很多资料其实都是已经过时了的(有些则是并不相干...
  • Flasco
  • Flasco
  • 2017-07-04 21:32:07
  • 3384

混合应用使用react-navigation调用起来RN指定的某个界面

今天来讲解一下react-navigation的一个深链接,如果开发了混合应用然后,想要使得在原生页面开启RN的指定界面。 之前的第一个想法就是使用时间总线去处理,在原生的位子发出一个信息给RN,告...
  • fox_wei_hlz
  • fox_wei_hlz
  • 2017-12-21 11:34:10
  • 135
收藏助手
不良信息举报
您举报文章:RN react-navigation使用
举报原因:
原因补充:

(最多只允许输入30个字)