![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React Native
安迪源文
小步快走
展开
-
React Navigation API 参考手册 1:Navigation prop
应用中使用React Navigtation管理的每个screen组件都会被自动提供一个属性navigation。它看起来是这个样子的 : this.props.navigation navigate – 跳到其他屏goBack – 关掉当前活跃屏addListener – 订阅导航生命周期事件isFocused – 一个函数,指出该屏是否处于聚焦状态(focused) state...翻译 2018-03-16 18:44:50 · 5442 阅读 · 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 · 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 · 696 阅读 · 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 · 538 阅读 · 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 · 818 阅读 · 0 评论 -
React Navigation源代码阅读 : views/SceneView.js
import React from 'react';import propTypes from 'prop-types';/** * 场景视图组件: 用于渲染屏幕场景组件的组件 * * 其实就是在自己的渲染方法中将最终的屏幕场景组件渲染出来, * 这也是一个高阶组件,所有的属性参数等都来自外部,包括所要渲染的 * 屏幕场景组件,本组件只是获取外部指定的这些属性参数等信息应用到 *...原创 2018-05-20 11:51:33 · 436 阅读 · 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 · 348 阅读 · 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 · 816 阅读 · 0 评论 -
React Navigation源代码阅读 :views/TouchableItem.js
/** * * 封装一个 touchable 组件,在 iOS 和 Android 都使用原生的效果 。 * * 其实是对 TouchableNativeFeedback 和 TouchableOpacity 的抽象和封装: * 1. 到底使用 TouchableNativeFeedback 还是 TouchableOpacity ? * 1.1 Android 平台并且平台版本&gt...原创 2018-05-28 12:18:00 · 423 阅读 · 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 · 634 阅读 · 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 · 1086 阅读 · 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 · 665 阅读 · 0 评论 -
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 · 337 阅读 · 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 · 679 阅读 · 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 · 628 阅读 · 0 评论 -
使用React Navigation时从任意位置发起屏幕切换
简介一般情况下,使用React Navigation的时候,我们总是从某个属于React Navigation导航栈的屏幕(或者叫做路由)组件的内部发起导航,这种情况下,因为我们有this.props.navigation可用,所以发起导航不是什么问题。但是在有些时候,比如我们对通用业务逻辑进行了封装并且需要在这些逻辑中发起屏幕切换,而这些封装后的逻辑不属于任何一个React Navigati...原创 2018-04-28 18:01:16 · 1336 阅读 · 0 评论 -
React Navigation StackNavigator中指定屏幕过渡方式
问题在React Navigation中使用StackNavigator时,新屏幕的过渡方式是通过StackNavigator的参数StackNavigatorConfig.mode来指定的。缺省情况下,此参数的值为card,在android手机上表现为自底向上滑出,在苹果手机上表现为自右向左滑出。另外一个可用的选项是modal,不过这个选项仅仅针对苹果手机可用,其表现为自底向上滑出屏幕。...原创 2018-05-06 10:39:42 · 2606 阅读 · 0 评论 -
React Navigation 基础 3 : 屏幕间切换
屏幕间切换在上一节中,我们定义了一个StackNavigator,带有两个路由 (Home和Details),但是我们没有学习如何让用户从Home跳到Details。如果是在浏览器中,我们能够写出这样的代码用于页面跳转: <a href="details.html">Go to Details</a>或者这个样子 :翻译 2018-03-16 21:30:03 · 1456 阅读 · 0 评论 -
React Navigation 基础 4 : 屏幕间切换参数传递
屏幕间切换参数传递现在我们已经知道了如何创建一个带有一些路由屏幕的StackNavigator,并且能够在屏幕间切换,现在我们来看看导航时如何传递参数。这件事可分为两部分 :将参数放到一个对象里,作为navigation.navigate的第二个参数传递给目标路由 : this.props.navigation.navigate('RouteName', { /* 参数放到这里 */...翻译 2018-03-19 10:26:38 · 4713 阅读 · 0 评论 -
React Navigation 基础 6 : 头部按钮
现在我们已经知道了如何定制屏幕头部,现在来让他有点感觉!夸大了哈,我们只是想让它能够按照良好定义的方式响应我们的触碰。向头部增加一个按钮和头部交互最常见的方式是点击头部标题左边或者右边的按钮。现在,我们就向头部右边增加一个按钮(整个屏幕上最不容易被触碰到的地方之一,具体取决于指头和屏幕的大小,但是通常我们会把按钮放在这里)。class HomeScreen extends Re...翻译 2018-03-23 09:10:00 · 2872 阅读 · 1 评论 -
React Navigation 基础 5 : 配置导航头部
配置导航头部设置头部标题屏幕组件可以有一个静态属性navigationOptions,可以是一个对象或者返回一个对象的函数,该对象包含了各种配置选项。用做头部标题的选项叫做title,如下所示 :// 这是一个屏幕组件class HomeScreen extends React.Component { // 静态对象属性,名称为 navigationOptions s...翻译 2018-03-19 17:20:40 · 6493 阅读 · 3 评论 -
React Navigation 基础 1 : 开始使用
开始使用React Navigation的诞生,源自React Native社区对这样一个页面导航解决方案的需求 :扩展性强易用完全使用JavaScript编写(这样的话你就有机会阅读和理解所有的源代码),建立在强大的平台原生原语(native primitives)基础之上在你决定开始在你的项目中使用React Navigation之前,你可能需要读一下这篇文章anti-p...翻译 2018-03-14 09:28:07 · 702 阅读 · 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 Native Flexbox 使用小结
布局和对齐flexDirection 可用值 : row, column缺省值为 columnalginItems 负责侧轴(cross axis)方向上的对齐方式可用值 : flex-start,flex-end,center,stretchjustifyContent 负责主轴(main axis)方向上的对齐方式可用值 : flex-start,flex-end,ce...原创 2018-03-20 16:48:16 · 208 阅读 · 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 · 1839 阅读 · 0 评论 -
React Navigation 基础 8 : 术语词汇表
Header – 头部也叫做导航头部,导航条,navbar,或许还有其他什么叫法。特指导航栈内某个屏幕最上方的一块矩形区域,包含了返回按钮和屏幕标题(可能还有一些其他东西,比如标题右方可能还会有文字图片按钮等)。这整个矩形区域在React Navigation中被叫做”header”(头部)。Screen component – 屏幕组件一个屏幕组件指的是我们的路由配置中所使用的组件:...翻译 2018-03-24 19:05:20 · 545 阅读 · 0 评论 -
React Navigation API 参考手册 2:StackNavigator 栈式导航
提供一种将新屏放在栈顶的屏幕切换方式。 译注 : 本文中屏幕切换,变换,过渡指的都是一个意思,对应英文 screen transition 。缺省情况下,苹果和安卓上,StackNavigator被配置得有类似的外观和感觉:苹果iOS系统上新屏幕从右侧滑出,安卓平台上新屏幕从底部淡出。苹果iOS平台上StackNavigator也可以被配置成模态样式,屏幕从底部滑出。API定义...翻译 2018-03-27 23:09:07 · 903 阅读 · 0 评论 -
React高级指南--引用Refs和DOM
引用Refs提供了一个访问render()方法DOM节点或者React元素的方法。典型的React数据流中,props是双亲组件和子组件交互的唯一手段。要修改一个子组件,你需要使用新的props重新渲染它。然而,确实存在少数一些情况你需要命令性地(imperatively)修改一个子节点而不是通过典型的props数据流方式。被修改的子节点可能是一个React组件实例,亦或是一个DOM元素。对于...翻译 2018-04-24 11:13:02 · 3737 阅读 · 0 评论 -
React Native 应用中使用 Redux 管理状态
简介本文假设你已经有一个可以运行的 React Native 应用,在此前提下介绍如何引入 Redux 管理状态。本文所使用的例子功能如下 : 1. 使用 Redux store 管理状态数据:一个用户名和一个计数器; 1. store对用户名可以有两种原子操作 : 设置为某个值,或者 清除用户名; 2. store对计数器可以有两种原子操作: 增加1,或者 减少1 ; ...原创 2018-04-25 16:54:32 · 2818 阅读 · 0 评论 -
React Navigation使用中跟踪屏幕切换
定义所使用的导航栈const RootStack = StackNavigator( // ... 略去具体内容);工具方法:获取当前屏幕名称// gets the current screen from navigation statefunction getCurrentRouteName(navigationState) { if (!navig...原创 2018-04-28 15:31:51 · 1002 阅读 · 0 评论 -
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 · 811 阅读 · 0 评论