![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React Navigation
安迪源文
小步快走
展开
-
React Navigation v2/v3 StackNavigator 中指定屏幕过渡方式
此方法针对 react-navigation 2.x,3.x 版本。问题在React Navigation中使用StackNavigator时,屏幕切换的过渡方式是通过StackNavigator参数StackNavigatorConfig.mode来指定的。缺省情况下,此参数的值为card,在android手机上表现为自底向上滑出,在苹果手机上表现为自右向左滑出。另外一个可用的选项是mo...原创 2018-12-20 14:40:43 · 814 阅读 · 0 评论 -
React Navigation源代码阅读 :routers/TabRouter.js
import invariant from '../utils/invariant';import getScreenForRouteName from './getScreenForRouteName';import createConfigGetter from './createConfigGetter';import NavigationActions from '../Navig...原创 2018-05-14 23:23:48 · 449 阅读 · 0 评论 -
React Navigation源代码阅读 :StateUtils.js
import invariant from './utils/invariant';/** * Utilities to perform atomic operation with navigate state and routes. * * 对导航状态和路由执行原子操作的工具方法 * * 导航状态可以理解成这样一个对象 : * 1. 拥有一个属性 路由栈 routes, 是一个即...原创 2018-05-14 18:35:49 · 450 阅读 · 0 评论 -
React Navigation(v1.5.11)源代码阅读 : 目录结构
基于 Ract Navigation v1.5.11 用到的术语 : HOC : 高阶组件, Higher Order ComponentRouter : 路由器 注意,这里所说的路由器并非是通信领域中的路由器 目录结构//Ract Navigation v1.5.11 源代码目录结构 react-navigation/src │ │ addNav...原创 2018-05-07 16:34:29 · 698 阅读 · 0 评论 -
React Navigation源代码阅读 : views/SceneView.js
import React from 'react';import propTypes from 'prop-types';/** * 场景视图组件: 用于渲染屏幕场景组件的组件 * * 其实就是在自己的渲染方法中将最终的屏幕场景组件渲染出来, * 这也是一个高阶组件,所有的属性参数等都来自外部,包括所要渲染的 * 屏幕场景组件,本组件只是获取外部指定的这些属性参数等信息应用到 *...原创 2018-05-20 11:51:33 · 437 阅读 · 0 评论 -
React Navigation源代码阅读 : views/withNavigationFocus.js
import React from 'react';import propTypes from 'prop-types';import hoistStatics from 'hoist-non-react-statics';import invariant from '../utils/invariant';// HOC,增强一个组件,让其具有 navigation 属性和 isFoc...原创 2018-05-20 11:43:02 · 823 阅读 · 0 评论 -
React Navigation源代码阅读 : views/withNavigation.js
import React from 'react';import propTypes from 'prop-types';import hoistStatics from 'hoist-non-react-statics';/** * HOC,增强一个组件,让其具有 navigation 属性 * @param Component */export default function...原创 2018-05-20 11:33:39 · 541 阅读 · 0 评论 -
React Navigation源代码阅读 : views/CardStack/CardStackTransitioner.js
import React from 'react';import { NativeModules } from 'react-native';import CardStack from './CardStack';import CardStackStyleInterpolator from './CardStackStyleInterpolator';import Transitione...原创 2018-05-20 11:26:09 · 455 阅读 · 0 评论 -
React Navigation源代码阅读 : views/CardStack/TransitionConfigs.js
import {Animated, Easing, Platform} from 'react-native';import CardStackStyleInterpolator from './CardStackStyleInterpolator';import * as ReactNativeFeatures from '../../utils/ReactNativeFeatures';...原创 2018-05-20 11:22:21 · 631 阅读 · 0 评论 -
使用React Navigation时从任意位置发起屏幕切换
简介一般情况下,使用React Navigation的时候,我们总是从某个属于React Navigation导航栈的屏幕(或者叫做路由)组件的内部发起导航,这种情况下,因为我们有this.props.navigation可用,所以发起导航不是什么问题。但是在有些时候,比如我们对通用业务逻辑进行了封装并且需要在这些逻辑中发起屏幕切换,而这些封装后的逻辑不属于任何一个React Navigati...原创 2018-04-28 18:01:16 · 1338 阅读 · 0 评论 -
React Navigation源代码阅读 :routers/validateScreenOptions.js
const deprecatedKeys = ['tabBar'];/** * Make sure screen options returned by the `getScreenOption` * are valid * * 确保由 getScreenOption 返回的参数有效 */export default (screenOptions, route) => {...原创 2018-05-13 10:20:01 · 262 阅读 · 0 评论 -
React Navigation源代码阅读 : NavigationActions.js
// 所支持的 Action 的常量定义,都定义为字符串,也可以理解为 Action 的类型,常量名字基本上都可以望文知意const BACK = 'Navigation/BACK'; // 返回:关闭当前路由,返回当前路由关闭后栈中的最顶层路由屏幕const INIT = 'Navigation/INIT';//const NAVIGATE = 'Navigation/NAVIGATE';...原创 2018-05-08 18:43:17 · 600 阅读 · 0 评论 -
React Navigation源代码阅读 : utils/invariant.js
'use strict';/** * 该模块用于提供一个断言函数 invariant(),用于帮助你的程序断言某些应改为 * true 的状态条件。 * * * 使用方式和 sprintf 类似,只是通配符只支持 %s,如果断言条件不为true,则会抛出一个 Error。 * * */var validateFormat = function(format) {};...原创 2018-05-08 19:02:29 · 1185 阅读 · 0 评论 -
React Navigation源代码阅读 : views/CardStack/CardStack.js
import React from 'react';import clamp from 'clamp';import {Animated, Easing, I18nManager, PanResponder, Platform, StyleSheet, View,} from 'react-native';import Card from './Card';import Header ...原创 2018-05-30 16:55:06 · 680 阅读 · 0 评论 -
React Navigation源代码阅读 : views/TabView/TabView.js
import React from 'react';import {View, StyleSheet, Platform} from 'react-native';import {TabViewAnimated, TabViewPagerPan} from 'react-native-tab-view';import SafeAreaView from 'react-native-safe-...原创 2018-06-05 14:24:27 · 667 阅读 · 0 评论 -
React Navigation源代码阅读 : views/CardStack/CardStackStyleInterpolator.js
import {I18nManager} from 'react-native';import getSceneIndicesForInterpolationInputRange from '../../utils/getSceneIndicesForInterpolationInputRange';/** * 工具类:构建 card stack 中 card 的样式,在屏幕切换时使用的插...原创 2018-05-29 11:33:30 · 1087 阅读 · 0 评论 -
React Navigation源代码阅读 : views/Transitioner.js
import React from 'react';import {Animated, Easing, StyleSheet, View} from 'react-native';import invariant from '../utils/invariant';import NavigationScenesReducer from './ScenesReducer';import C...原创 2018-05-28 18:31:22 · 637 阅读 · 0 评论 -
React Navigation源代码阅读 :views/TouchableItem.js
/** * * 封装一个 touchable 组件,在 iOS 和 Android 都使用原生的效果 。 * * 其实是对 TouchableNativeFeedback 和 TouchableOpacity 的抽象和封装: * 1. 到底使用 TouchableNativeFeedback 还是 TouchableOpacity ? * 1.1 Android 平台并且平台版本&gt...原创 2018-05-28 12:18:00 · 425 阅读 · 0 评论 -
React Navigation源代码阅读 : createNavigationContainer.js
import React from 'react';import {Linking} from 'react-native';import {BackHandler} from './PlatformHelpers';import NavigationActions from './NavigationActions';import addNavigationHelpers from '....原创 2018-05-16 19:00:06 · 1435 阅读 · 0 评论 -
React Navigation源代码阅读 : views/ScenesReducer.js
import invariant from '../utils/invariant';import shallowEqual from '../utils/shallowEqual';const SCENE_KEY_PREFIX = 'scene_';/** * Helper function to compare route keys (e.g. "9", "11"). * 工具助...原创 2018-05-27 10:30:30 · 349 阅读 · 0 评论 -
React Navigation源代码阅读 :views/Header/Header.js
import React from 'react';import {Animated, Image, Platform, StyleSheet, View,} from 'react-native';import {MaskedViewIOS} from '../../PlatformHelpers';import SafeAreaView from 'react-native-safe-...原创 2018-05-16 11:55:37 · 818 阅读 · 0 评论 -
React Navigation源代码阅读 :views/Header/HeaderTitle.js
import React from 'react';import {Text, View, Platform, StyleSheet, Animated} from 'react-native';const AnimatedText = Animated.Text;/** * react-navigation 缺省的 HeaderTitle 实现, * 但是如果开发人员通过参数 na...原创 2018-05-16 11:21:05 · 453 阅读 · 0 评论 -
React Navigation源代码阅读 :views/withOrientation.js
import React from 'react';import {Dimensions} from 'react-native';import hoistNonReactStatic from 'hoist-non-react-statics';/** * 输入当前屏幕宽度高度参数,判断是横屏还是竖屏,如果 宽width 大于 高height , * 认为是横屏,否则认为是竖屏 *...原创 2018-05-16 09:39:52 · 541 阅读 · 0 评论 -
React Navigation源代码阅读 : navigators/StackNavigator.js
import React from 'react';import createNavigationContainer from '../createNavigationContainer';import createNavigator from './createNavigator';import CardStackTransitioner from '../views/CardStack/...原创 2018-05-19 10:22:16 · 551 阅读 · 0 评论 -
React Navigation源代码阅读 :routers/KeyGenerator.js
/** * 本模块提供路由项唯一性 key 的生成函数 * @type {string} */// 目标全局唯一key的前缀部分 ,// 格式 : id-当前时间的时间戳,例子:let uniqueBaseId = `id-${Date.now()}`;// 目标全局唯一key的生成计数器,从0开始,每生成一个新的key,//该变量自增1let uuidCount = 0;...原创 2018-05-13 09:55:20 · 265 阅读 · 0 评论 -
React Navigation源代码阅读 :routers/validateRouteConfigMap.js
import invariant from '../utils/invariant';/** * Make sure the config passed e.g. to StackRouter, TabRouter has * the correct format, and throw a clear error if it doesn't. * * 检查传递给StackRouter...原创 2018-05-13 09:41:23 · 1199 阅读 · 0 评论 -
React Navigation源代码阅读 : addNavigationHelpers.js
/** * * 此模块导出一个函数,该函数用于增强一个 navigation 的功能, * 为其添加各种导航函数,所添加的各个导航函数的逻辑其实是 * 构造相应的 action,然后使用 navigation 的 dispatch 方法 * 派发出去 */import NavigationActions from './NavigationActions';import inva...原创 2018-05-08 20:21:35 · 1448 阅读 · 0 评论 -
React Navigation API 参考手册 2:StackNavigator 栈式导航
提供一种将新屏放在栈顶的屏幕切换方式。 译注 : 本文中屏幕切换,变换,过渡指的都是一个意思,对应英文 screen transition 。缺省情况下,苹果和安卓上,StackNavigator被配置得有类似的外观和感觉:苹果iOS系统上新屏幕从右侧滑出,安卓平台上新屏幕从底部淡出。苹果iOS平台上StackNavigator也可以被配置成模态样式,屏幕从底部滑出。API定义...翻译 2018-03-27 23:09:07 · 905 阅读 · 0 评论 -
React Navigation 基础 8 : 术语词汇表
Header – 头部也叫做导航头部,导航条,navbar,或许还有其他什么叫法。特指导航栈内某个屏幕最上方的一块矩形区域,包含了返回按钮和屏幕标题(可能还有一些其他东西,比如标题右方可能还会有文字图片按钮等)。这整个矩形区域在React Navigation中被叫做”header”(头部)。Screen component – 屏幕组件一个屏幕组件指的是我们的路由配置中所使用的组件:...翻译 2018-03-24 19:05:20 · 545 阅读 · 0 评论 -
React Navigation 基础 7 : 全屏模态
Dictionary.com对于“模态”没有给出一个令人满意的定义,不过语义UI是这么描述“模态”的: A modal displays content that temporarily blocks interactions with the main view。 “模态”显示内容的同时临时阻止用户和主视图的交互。听起来这是对的。模态就像一个弹出框–它不是主导航流程的一部分—...翻译 2018-03-24 18:34:57 · 1841 阅读 · 0 评论 -
React Navigation 基础 2 : Hello React Navigation
Hello React Navigation在浏览器中,链接到其他页面你可以使用HTML锚点标签(anchor tag)<a>。当用户点击一个链接时,当前页面的URL被压到浏览器历史记录栈中。当用户点击了回退按钮,浏览器会从浏览历史记录栈的栈顶弹出一项,然后当前活跃页面现在又变成了之前刚刚访问过的那个页面。React Native没有像浏览器这样一个全局的访问历史记录栈机制,正因此...翻译 2018-03-14 09:28:55 · 1184 阅读 · 1 评论 -
React Navigation 基础 1 : 开始使用
开始使用React Navigation的诞生,源自React Native社区对这样一个页面导航解决方案的需求 :扩展性强易用完全使用JavaScript编写(这样的话你就有机会阅读和理解所有的源代码),建立在强大的平台原生原语(native primitives)基础之上在你决定开始在你的项目中使用React Navigation之前,你可能需要读一下这篇文章anti-p...翻译 2018-03-14 09:28:07 · 703 阅读 · 0 评论 -
React Navigation 基础 5 : 配置导航头部
配置导航头部设置头部标题屏幕组件可以有一个静态属性navigationOptions,可以是一个对象或者返回一个对象的函数,该对象包含了各种配置选项。用做头部标题的选项叫做title,如下所示 :// 这是一个屏幕组件class HomeScreen extends React.Component { // 静态对象属性,名称为 navigationOptions s...翻译 2018-03-19 17:20:40 · 6495 阅读 · 3 评论 -
React Navigation 基础 6 : 头部按钮
现在我们已经知道了如何定制屏幕头部,现在来让他有点感觉!夸大了哈,我们只是想让它能够按照良好定义的方式响应我们的触碰。向头部增加一个按钮和头部交互最常见的方式是点击头部标题左边或者右边的按钮。现在,我们就向头部右边增加一个按钮(整个屏幕上最不容易被触碰到的地方之一,具体取决于指头和屏幕的大小,但是通常我们会把按钮放在这里)。class HomeScreen extends Re...翻译 2018-03-23 09:10:00 · 2874 阅读 · 1 评论 -
React Navigation 基础 4 : 屏幕间切换参数传递
屏幕间切换参数传递现在我们已经知道了如何创建一个带有一些路由屏幕的StackNavigator,并且能够在屏幕间切换,现在我们来看看导航时如何传递参数。这件事可分为两部分 :将参数放到一个对象里,作为navigation.navigate的第二个参数传递给目标路由 : this.props.navigation.navigate('RouteName', { /* 参数放到这里 */...翻译 2018-03-19 10:26:38 · 4717 阅读 · 0 评论 -
React Navigation 基础 3 : 屏幕间切换
屏幕间切换在上一节中,我们定义了一个StackNavigator,带有两个路由 (Home和Details),但是我们没有学习如何让用户从Home跳到Details。如果是在浏览器中,我们能够写出这样的代码用于页面跳转: <a href="details.html">Go to Details</a>或者这个样子 :翻译 2018-03-16 21:30:03 · 1457 阅读 · 0 评论 -
React Navigation源代码阅读 : utils/shallowEqual.js
/**本模块对外提供一个对象相等与否的浅层比较方法**/'use strict';const hasOwnProperty = Object.prototype.hasOwnProperty;/** * 一个工具函数: Object.is 方法, * inlined Object.is polyfill to avoid requiring consumers ship thei...原创 2018-05-09 22:05:34 · 462 阅读 · 0 评论 -
React Navigation源代码阅读 : utils/ReactNativeFeatures.js
import { NativeModules } from 'react-native';const { PlatformConstants } = NativeModules;/** * 判断当前的React Native 版本是否支持改进的 Spring animation 机制, * 版本在 >=0.50 或者为 0.0 是才返回真 * @returns {boolean}...原创 2018-05-09 22:22:12 · 272 阅读 · 0 评论 -
React Navigation StackNavigator中指定屏幕过渡方式
问题在React Navigation中使用StackNavigator时,新屏幕的过渡方式是通过StackNavigator的参数StackNavigatorConfig.mode来指定的。缺省情况下,此参数的值为card,在android手机上表现为自底向上滑出,在苹果手机上表现为自右向左滑出。另外一个可用的选项是modal,不过这个选项仅仅针对苹果手机可用,其表现为自底向上滑出屏幕。...原创 2018-05-06 10:39:42 · 2608 阅读 · 0 评论 -
React Navigation使用中跟踪屏幕切换
定义所使用的导航栈const RootStack = StackNavigator( // ... 略去具体内容);工具方法:获取当前屏幕名称// gets the current screen from navigation statefunction getCurrentRouteName(navigationState) { if (!navig...原创 2018-04-28 15:31:51 · 1004 阅读 · 0 评论