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

本文主要是介绍React Navigation 自认比较好的navigator组件(一),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

#更新: 最近react-navigation 更新到了1.0.0 beta9 版本,好多东西已经更改了,建议大家去github寻找最新的信息。下面的老版本就做个参考吧。http://www.jianshu.com/p/80408a62d690

React Navigation https://reactnavigation.org/docs/navigators/stack

控件主要分为三种:
1.StackNavigator :类似于普通的Navigator,屏幕上方导航栏
2.TabNavigator:obviously, 相当于iOS里面的TabBarController,屏幕下方标签栏
3.DrawerNavigator:抽屉效果,左侧滑出这种效果。

Screen Navigation Prop

在你的app中,每一个界面都会得到一个navigation prop,包含着以下一些属性和action:

navigate - Link to other screens

调用此方法去链接你的其他界面,包含以下参数:
·routeName- 目标路由名称,将在你的app router中注册
·params-将参数合并到目标router中
·action-(高级)sub-action ,如果该界面是一个navigator的话,将运行这个sub-action
example:

class HomeScreen extends React.Component {render() {const {navigate} = this.props.navigation;return (<View><Text>This is the home screen of the app</Text><ButtononPress={() => navigate('Profile', {name: 'Brent'})}title="Go to Brent's profile"/></View>)}
}
state-The screen's current state/route

每个界面通过this.props.navigation.state去访问它的router,state其中包括了:
·routeName - router配置的名称
·key-用来区分router的唯一标示
·params-可选的一些string参数

setParams-Make changes to route params

该方法允许界面更改router中的参数,可以用来动态的更改header的内容

goBack-Close the active screen and move back

返回,pop回上一级

dispatch -Send an action to the router

使用dispatch可以向任何navigation传递一些其他的action,主要支持的action有:

Navigate
import { NavigationActions } from 'react-navigation'const navigationAction = NavigationActions.navigate({routeName: 'Profile',params: {},// navigate can have a nested navigate action that will be run inside the child routeraction: NavigationActions.navigate({ routeName: 'SubProfileRoute'})
})
this.props.navigation.dispatch(navigationAction)
Reset

Reset方法会擦除掉所有的导航状态,并且使用内部新的结果替代

import { NavigationActions } from 'react-navigation'const resetAction = NavigationActions.reset({index: 0,actions: [NavigationActions.navigate({ routeName: 'Profile'})]
})
this.props.navigation.dispatch(resetAction)

可以指定多个action,但是要给定正确的index

SetParams

为指定的router更新参数,该参数必须是已经存在于router的param中,

import { NavigationActions } from 'react-navigation'const setParamsAction = NavigationActions.setParams({params: {}, // these are the new params that will be merged into the existing route params// The key of the route that should get the new paramskey: 'screen-123',
})
this.props.navigation.dispatch(setParamsAction)

StackNavigator

简单的例子

class MyHomeScreen extends React.Component {static navigationOptions = {title: 'Home',    //设置navigator的title}render() {return (//button的onPress方法,实现点击跳转界面,并且传递参数name:Lucy<ButtononPress={() => this.props.navigation.navigate('Profile', {name: 'Lucy'})}title="Go to Lucy's profile"/>);}
}//生成路由关系
const ModalStack = StackNavigator({Home: {//对应界面MyHomeScreenscreen: MyHomeScreen,},Profile: {path: 'people/:name',screen: MyProfileScreen,},
});

·API Definition

StackNavigator(RouteConfigs, StackNavigatorConfig)

其中的参数:

RouteConfigs :

路由配置和路由名称的一种映射,告诉navigator按照该路由要呈现什么。

StackNavigator({//Home界面routeHome:{//require  screen就是一个react的组件(component),用来展示的那个界面screen:HomeScreen,//optional   当深层次关联或者在web app中使用React Navigation,使用路径path:'people/:username',//optional Override navigationOptions方法,对navigator做一些配置navigationOptions:{//设置个标题title:({state}) => `${state.params.username}'s Profile'`},},//我的其他路由,类似于上面这种定义模式的,供给navigator实现页面见得跳转...MyOtherRoutes,
)}
StackNavigatorConfig

option for the route(路由选项):
·initialRouteName -为stack设置默认的界面,必须和route configs里面的一个key匹配。
·initialRouteParams - 初始路由的参数。
·navigationOptions- 屏幕导航的默认选项。
·paths-route config里面路径设置的映射。

Visual Option(视觉选项):
·mode- 定义渲染(rendering)和转换(transitions)的模式,两种选项(给字符串即可):
1) card-使用标准的iOS和Android的界面切换,这是默认的。
2)modal- 仅在iOS端有用,即模态出该视图。
·headerMode- 指定header应该如何被渲染,选项:
1)float- 共用一个header 意思就是有title文字渐变效果。
2)screen- 各用各的header 意思就是没有title文字渐变效果。
3)none- 没有header。
·cardStyle- 使用该属性继承或者重载一个在stack中的card的样式。
·onTransitionStart- 一个函数,在换场动画开始的时候被激活。
·onTransitionEnd- 一个函数,在换场动画结束的时候被激活。

Screen Navigation Options

通常你可以定义一个静态的navigationOptions在你的组件之上,例如:

class ProfileScreen extends React.Component {//设置navigation选项static navigationOptions = {//标题title: ({ state }) => `${state.params.name}'s Profile!`,//头部定义了一个右按钮,来改变edit的状态 ing或者完成header: ({ state, setParams }) => ({// Render a button on the right side of the header// When pressed switches the screen to edit mode.right: (<Buttontitle={state.params.editing ? 'Done' : 'Edit'}onPress={() => setParams({editing: state.params.editing ? false : true})}/>),}),};...

All navigationOptions for the StackNavigator:
·title- 界面的标题(string)
·header- header bar设置对象
1)visible - bool值,header是否可见。
2)title-标题 String或者是一个react 节点
3)backTitle-返回按钮在iOS平台上,默认是title的值
4)right- react 节点显示在header右边,例如右按钮
5)left- react 节点显示在header左边,例如左按钮
6)style-header的style
7)titleStyle- header的title的style (^__^) 嘻嘻……
8)tintColor- header的前景色
·cardStack- 配置card stack
1)gesturesEnabled- 是否允许通过手势关闭该界面,在iOS上默认为true,在Android上默认为false
再来一个例子,自定义的header:

static navigationOptions = {title: ({ state }) => {if (state.params.mode === 'info') {return `${state.params.user}'s Contact Info`;}return `Chat with ${state.params.user}`;},header: ({ state, setParams ,goBack}) => {// The navigation prop has functions like setParams, goBack, and navigate.  可以在header的构造方法里面传入setParams,goBack,navigate方法.let right = (<Buttontitle={`${state.params.user}'s info`}onPress={() => setParams({ mode: 'info' })}/>);if (state.params.mode === 'info') {right = (<Buttontitle="Done"onPress={() => setParams({ mode: 'none' })}/>);}let left = (<Buttontitle='返回'onPress={() => {goBack();}}/>);return { right ,left};},};
Navigator Props

一个navigator组件被StackNavigator(...)创建出来,可以伴随以下属性。
·screenProps- 为子界面传递额外的参数、选项,for example:

const SomeStack = StackNavigator({// config 配置该navigator
});<SomeStack//通过this.props.screenProps获得该参数内容screenProps={/* this prop will get passed to the screen components as this.props.screenProps */}
/>

这篇关于React Navigation 自认比较好的navigator组件(一)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/509821

相关文章

React实现原生APP切换效果

《React实现原生APP切换效果》最近需要使用Hybrid的方式开发一个APP,交互和原生APP相似并且需要IM通信,本文给大家介绍了使用React实现原生APP切换效果,文中通过代码示例讲解的非常... 目录背景需求概览技术栈实现步骤根据 react-router-dom 文档配置好路由添加过渡动画使用

使用Vue.js报错:ReferenceError: “Vue is not defined“ 的原因与解决方案

《使用Vue.js报错:ReferenceError:“Vueisnotdefined“的原因与解决方案》在前端开发中,ReferenceError:Vueisnotdefined是一个常见... 目录一、错误描述二、错误成因分析三、解决方案1. 检查 vue.js 的引入方式2. 验证 npm 安装3.

vue如何监听对象或者数组某个属性的变化详解

《vue如何监听对象或者数组某个属性的变化详解》这篇文章主要给大家介绍了关于vue如何监听对象或者数组某个属性的变化,在Vue.js中可以通过watch监听属性变化并动态修改其他属性的值,watch通... 目录前言用watch监听深度监听使用计算属性watch和计算属性的区别在vue 3中使用watchE

python解析HTML并提取span标签中的文本

《python解析HTML并提取span标签中的文本》在网页开发和数据抓取过程中,我们经常需要从HTML页面中提取信息,尤其是span元素中的文本,span标签是一个行内元素,通常用于包装一小段文本或... 目录一、安装相关依赖二、html 页面结构三、使用 BeautifulSoup javascript

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

百度/小米/滴滴/京东,中台架构比较

小米中台建设实践 01 小米的三大中台建设:业务+数据+技术 业务中台--从业务说起 在中台建设中,需要规范化的服务接口、一致整合化的数据、容器化的技术组件以及弹性的基础设施。并结合业务情况,判定是否真的需要中台。 小米参考了业界优秀的案例包括移动中台、数据中台、业务中台、技术中台等,再结合其业务发展历程及业务现状,整理了中台架构的核心方法论,一是企业如何共享服务,二是如何为业务提供便利。

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06