- 博客(39)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 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
692
原创 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
1100
原创 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
648
原创 React Navigation源代码阅读 ：views/TouchableItem.js
/** * * 封装一个 touchable 组件，在 iOS 和 Android 都使用原生的效果 。 * * 其实是对 TouchableNativeFeedback 和 TouchableOpacity 的抽象和封装: * 1. 到底使用 TouchableNativeFeedback 还是 TouchableOpacity ? * 1.1 Android 平台并且平台版本&gt...
2018-05-28 12:18:00
430
原创 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
356
原创 React Navigation源代码阅读 : views/SceneView.js
import React from 'react';import propTypes from 'prop-types';/** * 场景视图组件: 用于渲染屏幕场景组件的组件 * * 其实就是在自己的渲染方法中将最终的屏幕场景组件渲染出来, * 这也是一个高阶组件，所有的属性参数等都来自外部，包括所要渲染的 * 屏幕场景组件，本组件只是获取外部指定的这些属性参数等信息应用到 *...
2018-05-20 11:51:33
452
原创 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
839
原创 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
549
原创 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
461
原创 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
639
原创 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
564
翻译 高阶组件(Higher-Order Components)
高阶组件(Higher-Order Components)高阶组件(HOC)是React中组件重用的一种高级技术。HOC本身并不是React API的一部分。它是从React可组合性质中冒出来的一种模式。具体地讲，一个高阶组件是一个函数，它输入一个组件，然后返回一个新的组件。const EnhancedComponent = higherOrderComponent(Wrapped...
2018-05-17 18:51:59
3741
1
原创 React Navigation源代码阅读 : navigators/TabNavigator.js
import React from 'react';import {Platform} from 'react-native';import createNavigator from './createNavigator';import createNavigationContainer from '../createNavigationContainer';import TabRout...
2018-05-17 14:38:39
363
原创 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
1448
原创 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
829
原创 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
463
原创 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
547
原创 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
463
原创 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
463
原创 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
274
原创 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
274
原创 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
1206
原创 React Navigation源代码阅读 ：routers/StackRouter.js
import pathToRegexp from 'path-to-regexp';import NavigationActions from '../NavigationActions';import createConfigGetter from './createConfigGetter';import getScreenForRouteName from './getScreenF...
2018-05-11 19:58:34
652
原创 React Navigation源代码阅读 ：navigators/createNavigator.js
import React from 'react';/** * HOC:基于传入的路由器 router 和用来渲染屏幕(场景)的 view 创建一个导航器 navigator * Creates a navigator based on a router and a view that renders the screens. * @param router 路由器,可能是 TabRo...
2018-05-10 15:14:17
328
原创 React Navigation源代码阅读 ：views/CardStack/Card.js
import React from 'react';import { Animated, StyleSheet } from 'react-native';import createPointerEventsContainer from './PointerEventsContainer';/** * 定义一个React Component Card，这个组件会被 CardStack(卡...
2018-05-10 10:51:20
347
原创 React Navigation源代码阅读 ：views/CardStack/PointerEventsContainer.js
import React from 'react';import invariant from '../../utils/invariant';import AnimatedValueSubscription from '../AnimatedValueSubscription';const MIN_POSITION_OFFSET = 0.01;/** * Create a high...
2018-05-10 10:46:15
330
原创 React Navigation源代码阅读 ：views/AnimatedValueSubscription.js
import { Animated } from 'react-native';/** * 订阅一个动画值的变化事件 */export default class AnimatedValueSubscription { /** * 订阅一个动画值的变化事件 * @param value 目标动画值 Animated.Value * @param ca...
2018-05-10 10:15:52
258
原创 React Navigation源代码阅读 ：routers/getScreenForRouteName.js
import invariant from '../utils/invariant';/** * Simple helper that gets a single screen (React component or navigator) * out of the navigator config. * * 工具函数，用于获取路由配置 routeConfigs 中某个名字为 route...
2018-05-09 22:50:28
362
原创 React Navigation源代码阅读 ： react-navigation.js
// 本模块本身没有实现React Navigation的任何具体功能，// 本模块的的主要任务是将分散在各个具体功能模块文件中的功能集中导出module.exports = { // Core get createNavigationContainer() { return require('./createNavigationContainer').default; }...
2018-05-09 22:28:37
751
原创 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
279
原创 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
470
原创 React Navigation源代码阅读 ： addNavigationHelpers.js
/** * * 此模块导出一个函数，该函数用于增强一个 navigation 的功能， * 为其添加各种导航函数，所添加的各个导航函数的逻辑其实是 * 构造相应的 action,然后使用 navigation 的 dispatch 方法 * 派发出去 */import NavigationActions from './NavigationActions';import inva...
2018-05-08 20:21:35
1462
原创 React Navigation源代码阅读 : utils/invariant.js
'use strict';/** * 该模块用于提供一个断言函数 invariant(),用于帮助你的程序断言某些应改为 * true 的状态条件。 * * * 使用方式和 sprintf 类似，只是通配符只支持 %s，如果断言条件不为true，则会抛出一个 Error。 * * */var validateFormat = function(format) {};...
2018-05-08 19:02:29
1205
原创 React Navigation源代码阅读 : NavigationActions.js
// 所支持的 Action 的常量定义，都定义为字符串，也可以理解为 Action 的类型，常量名字基本上都可以望文知意const BACK = 'Navigation/BACK'; // 返回:关闭当前路由,返回当前路由关闭后栈中的最顶层路由屏幕const INIT = 'Navigation/INIT';//const NAVIGATE = 'Navigation/NAVIGATE';...
2018-05-08 18:43:17
615
原创 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
710
原创 React Navigation StackNavigator中指定屏幕过渡方式
问题在React Navigation中使用StackNavigator时，新屏幕的过渡方式是通过StackNavigator的参数StackNavigatorConfig.mode来指定的。缺省情况下，此参数的值为card，在android手机上表现为自底向上滑出，在苹果手机上表现为自右向左滑出。另外一个可用的选项是modal，不过这个选项仅仅针对苹果手机可用，其表现为自底向上滑出屏幕。...
2018-05-06 10:39:42
2631
原创 ES6 Map 和 对象/JSON字符串之间的转换
本文中用到的一些术语的解释: 任意类型Map ： 指该Map对象的key可以是任意JavaScript类型；String Map ： Map对象的key都是JavaScript String;二值对 ： 有且仅有两个元素的一个数组对象，比如[true,7];二值对Array ： 一个数组对象，其每个元素都是一个二值对。利用 二值对Array 进行 任意类型Map 和 JSO...
2018-05-04 09:30:45
5038
原创 通过例子理解Promise
基于ES6语法 。创建Promise// 能正常完成的例子，任务成功做完是调用 resolve,参数是一个字符串消息let promiseOK = new Promise( (resolve, reject) => { // 这里是任务逻辑 resolve("成功完成"); });// 不能正常完成的例子，任务失败，调用...
2018-05-03 14:08:22
192
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人