![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React Navigation
慕天远
勤奋好学,
展开
-
React Navigation5.x 第九章 全面屏model
上图中显示了一个完全铺满整个屏幕的model。model就像一个弹窗------它不是你导航中的页面-----其显示与隐藏都有其独特的方式,会向你展示一些特别的信息。将这个作为React Navigation框架的一部分进行讲解的目的不仅仅是因为其是我们经常会用到的,而且这也是实现嵌套导航所需掌握的知识点。其是React Navigation中很重要的一部分。创建一个model堆栈...翻译 2020-04-09 11:09:52 · 585 阅读 · 0 评论 -
React Navigation5.x第七章 导航的嵌套
嵌套导航的意思就是说你新建了一个导航器,在这个导航器的导航页中又包含了另一个导航器。比如:function Home() { return ( <Tab.Navigator> <Tab.Screen name="Feed" component={Feed} /> <Tab.Screen name="Messages" comp...翻译 2020-04-03 15:35:54 · 1096 阅读 · 0 评论 -
React Navigation 5.x 第六章 导航头的按钮
现在我们知道了如何自定义我们导航头的样式,现在我们来让他能够响应我们的触摸事件。在导航头上添加一个按钮通常我们与导航头交互的方法就是点击位于标题左侧或者右侧的按钮。现在我们在导航头的右边添加一个按钮(这个地方也是你屏幕中最难触摸到的地方了)。function StackScreen() { return ( <Stack.Navigator> &l...翻译 2020-04-01 15:31:50 · 1047 阅读 · 0 评论 -
React Navigation5.x第五章配置导航头
我们已经演示过如何设置导航头的标题,现在我们一起来探讨一下导航头的其他设置。设置导航头的标题Screen组件都有一个options属性,这个属性可能是一个js对象或者是一个返回js对象的方法。这个属性包含了很多可配置的选项。而其中的title就是最常用的之一。function StackScreen() { return ( <Stack.Navigator>...翻译 2020-03-27 11:26:23 · 1164 阅读 · 0 评论 -
React Navigation5.X 第四章传递参数
现在,我们知道如何创建配置导航器,并且如何在路由页面之间跳转。现在让我们来探讨一下当我们跳转页面的时候如何传递参数。关于这个有两点需要强调:我们可以将参数封装成一个对象,然后将这个对象作为navigation.navigate方法的第二个参数,从而实现跳转的时候传递参数过去。 使用route.params方法读取传递过来的参数。我们建议你传递过来的参数是JSON序列化的。func...翻译 2020-03-27 09:11:45 · 2262 阅读 · 0 评论 -
React Navigation5.x 第三章 在页面之间跳转
在上一章中,我们定义了一个堆栈导航器,其有两个路由(Home,Details),但是我们并不知道该如何从Home跳转到Detail页面如果这是一个web浏览器,我们就可以如下这般定义<a href="details.html">Go to Details</a>或者 我们也可以这样定义<a onClick={() => { win...翻译 2020-03-26 15:37:54 · 1087 阅读 · 0 评论 -
React Navigation5.x第二章 Hello React Navigation
注意:@react-navigation/stack 依赖于 @react-native-community/masked-view和其他的我们在第一章中安装的包。如果你现在还没有安装这些包,那么请转到第一章按照安装方法安装这些包。翻译 2020-03-26 10:58:03 · 652 阅读 · 0 评论 -
使用导航键
参数:key 在不同的导航功能中会反复使用到,今天让我们看一下其主要的用法。navigate 的调用方法 如果没有提供key,StackRouter的行为如下: 如果已经存在具有给定名称的路由,StackRouter将跳转到现有路由,同时设置新参数。 如果不存在这样的路由,StackRouter会将它推入堆栈。但是如果您要推送相同路由的多个...原创 2019-11-05 17:13:11 · 407 阅读 · 0 评论 -
当无法获取到navigation属性的时候该如何导航
通常我们可以使用navigation属性上的navigate或者popToTop方法来进行应用内的导航。但 这并不是导航的唯一方法,如果你没有使用像redux集成一样传递自己的navigation属性,那你就可以使用顶级导航器来分发你的导航操作。当你想要触发导航操作而又无法获得navigation属性的时候,你可以尝试下面的方法。通过ref 访问导航器,并将其传递给我们稍后将使用其进行导航的N...原创 2019-11-05 11:52:29 · 447 阅读 · 0 评论 -
StackRouter
react-navigation的基础知识:react-navigation是官方正在推的导航器,但是没有放入到react-native包中,而是单独开了一个库,它的核心概念是Router,Router的概念图如下所示:最上方的文字:上面这个图清洗的表达出了Router能干什么,最重要的一句话是:Router经常组合使用,并且能代理自路由,这句话的意思我待会分析源码来深入了解。...转载 2019-08-30 12:00:55 · 418 阅读 · 0 评论 -
React Navigation的使用
在React Navigation中主要有三种类型的组件: StackNavigation 用于实现各个页面之间的跳转 TabNavigation 用来实现同一个页面上不同界面的切换 DrawerNavigation 用来实现侧滑的抽屉效果StackNavigation采用堆栈式的页面导航来实现各个界面的跳转。它的构造函数createSt...原创 2019-08-29 17:08:03 · 402 阅读 · 0 评论 -
react navigation跳转方面的知识点
导航的本质和web界面不同,web界面直接通过url确定界面,通过<a>标签实现界面之间的切换。即使在SPA时代,也是通过比较轻松的router组件实现界面切换。但是native里面,特别是react-native开发里面,界面切换需要native层面手动实现,因此,一定需要有人站出来,把界面切换抽象为普适性的一种规则。react-navigation的基本思想,就是一个react...原创 2019-08-27 18:27:48 · 204 阅读 · 0 评论 -
NavigationActions的属性介绍和使用
所有的NavigationActions 都会返回一个对象,我们可以使用navigation.dispatch()这个方法将这个对象发送给router。有一点需要着重强调一下,当我们dispatch一个NavigationAction的时候,即使这个action没有被处理,它也不会抛出任何错误提示。(这与redux中相似,在redux中你dispatch一个action,如果这个action没...原创 2019-08-12 17:54:41 · 2662 阅读 · 0 评论 -
推送原理解析 极光推送使用详解
本文转自这里 ,在此向大佬致敬推送技术产生场景:服务器端主动发出:通常情况下,客户端与服务器交互都是客户端主动的,服务器一般不能主动与客户端进行数据交互,因为服务器端无法得知客户端的IP地址和状态。 数据实时性:如果服务器端有紧急数据要传递给客户端,就必须主动向客户端发送数据。 基本原理:使客户端实时获取服务器端消息,Pull方式,小周期轮询,费电费流量,另一个就是Push方式,服务器...转载 2019-07-23 18:34:26 · 4429 阅读 · 0 评论 -
使用react-navigation-redux-helps3.0更新事项
react-navigation-redux-helps3.0中有两个重要的更新1. reduxifyNavigator被改名为createReduxContainer2. createReactNavigationReduxMiddleware的参数顺序发生了变化export const middleware = createReactNavigationReduxMiddlewa...原创 2019-04-25 16:15:21 · 451 阅读 · 0 评论 -
Redux必要知识
使用redux之前,基本的东西还是要懂的,数据流向介绍:Action: 行为。它的作用就是将我们更新组件的状态(state)的每个动作抽象为一个行为,它有一个必须的参数type,定义了Action的名称,其他参数可自定义。写法: { type: 'TEST_ACTION', key1: 'value', ... ...转载 2019-04-27 11:03:49 · 247 阅读 · 0 评论