xiangzhihong8的专栏

概述React Native是Facebook技术团队于2015年4月在早先的React前端框架基础上开源的一套移动跨平台开发框架，可以同时支持iOS和Android两大移动平台。那有人会问，除了可以开发移动跨平台应用，那能不能使用React Native开发桌面客户端应用呢？答案是肯定的。如果有使用React Native开发桌面应用的需求，那么可以参考下微软推出的React Native for Windows + macOS技术。React Native for Windows + macOS是

前言一直以来，在不同平台开发和维护同一款产品，所付出的成本和代价都是一个令人头疼的问题，于是各类跨平台开发方案顺应而生。从Web容器方案到以React Native、Weex为代表的泛Web容器方案，最后再到以Flutter为代表的自绘引擎方案，这些优秀的跨平台开发框架们慢慢抹平了各个平台的差异，使得操作系统的边界变得越来越模糊。最近一年来，随着Google对Flutter推广力度的加大，老牌...

使用React Native从零开始开发一款移动应用是一件很惬意的事情，但对于一些已经上线的产品，完全摒弃原有应用的历史沉淀，全面转向React Native是不现实的。因此，使用React Native去统一原生Android、iOS应用的技术栈，把它作为已有原生应用的扩展模块，是目前混合开发的最有效方式。首先，在原生Android项目目录下执行以下命令创建一个package.json文件。yarn init然后，根据提示输入对应的配置信息。等待命令执行完成之后，我们会发现Android项目的根目

一、Hook简介React Hooks是从React 16.8版本推出的新特性，目的是解决React的状态共享以及组件生命周期管理混乱的问题。React Hooks的出现标志着，React不会再存在无状态组件的情况，React将只有类组件和函数组件的概念。众所周知，React应用开发中，组件的状态共享是一件很麻烦的事情，而React Hook只共享数据处理逻辑，并不会共享数据本身，因此也就不需要关心数据与生命周期绑定的问题。如下所示，是使用类组件实现计数器的示例。class Example exten

一、 Hook 简介1.1 Hook历史在React Hook出现之前的版本中，组件主要分为两种：函数式组件和类组件。其中，函数式组件通常只考虑负责UI的渲染，没有自身的状态也没有业务逻辑代码，是一个纯函数。而类组件则不同，类组件有自己的内部状态，界面的显示结果通常由props 和 state 决定，因此它也不再那么纯洁。函数式组件，类组件有如下一些缺点：状态逻辑难以复用。在类组件中，为了重用某些状态逻辑，社区提出了render props 或者 hoc 等方案，但是这些方案对组件的侵入性太强，并且

React Navigation简介在多页面应用程序中，页面的跳转是通过路由或导航器来实现的。在RN应用开发过程中，早期的路由可以直接使用官方提供的Navigator组件，不过从0.44版本开始，Navigator被官方从react native的核心组件库中剥离出来，放到react-native-deprecated-custom-components的模块中，并且Navigator组件也不再被官方推荐使用。此时，我们可以选择由React Native社区开源的一款路由导航库React Navigati

背景在使用 React Native（以下简称 RN ） 开发移动App时，会碰到很多弹窗的场景，虽然 RN自带了一个 Modal 组件可以实现这一效果，但是由于Android和iOS平台的差异性，使得使用同一个组件开发出来的效果会略有差异。比如，Modal组件在iOS平台，弹框是全屏的，但是在Android平台却不是，会有状态栏，如下效果。之所以这样，是因为Android 端的Modal 控件使用的Dialog，内容无法从状态栏处开始布局。而iOS是基于 Window 的，所以是覆盖在视图上面的。如

React Navigation是RN开发中一个比较常见的导航器，主要提供三种基本的导航样式。StackNavigator：类似于普通的Navigator，屏幕上方导航栏；TabNavigator：类似于iOS里面的TabBarController，屏幕下方的标签栏；DrawerNavigator：抽屉样式，侧边滑出；本文不具体介绍React Navigation 5.x的基本使用，本文主要讲如何将4.x迁移到5.x。对比4.x，大部分API和4x都是一致的，当然5.x的变化还是蛮大的，并且语

在React Native开发中，经常需要使用一些第三方的图像库，react-native-vector-icons就是这样一个不错的矢量图标库。不过，今天最新版本的RN在使用的时候，给报了一个错，如下所示。Unrecognized font family 'Ionicons'+[RCTFont updateFont:withFamily:size:weight:style:variant:scaleMultiplier:] RCTFont.mm:329-[RCTTextAttributes

概述React的核心机制之一就是可以在内存中创建虚拟的DOM元素。React利用虚拟DOM来减少对实际DOM的操作从而提升性能。JSX是什么JSX是React的核心组成部分，它使用XML标记的方式去直接声明界面，界面组件之间可以互相嵌套。React发明了JSX，利用HTML语法来创建虚拟DOM。当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析。使用虚拟DOM可以将React的语法

随着移动开发越来越火热，前端开发也是有之前11年一直火热到现在，不过我发现从去年年底开发，Android和ios基本已经饱和了，特别是随着广大开源社区的中很多人贡献代码，开发已经不是什么问题了，所以现在好多公司招聘 都要求3年以上工作经验的，无外乎好多培训班出来的会写一些功能，会写一些界面实现，就出来上班了，但是深层次到framwork层，能够深入了解原理的还是少数，特别是当我们的项目遇到瓶颈之后

作为一名Android开发者，我的感觉就是，一步一卡，卡的潇洒。但是我还是要学react-native，不要问我为什么,因为我相信一门解决了原生app，开发周期长，开发成本高，升级代价大的语言一定会火，而且react语言看起来那么熟悉，组建式的布局方式，让没有接触过web开发的我，感觉没有一点点晦涩，那么的自然，甚至体会不到web同学口中的革命性创新，native的开发者大概还会蠢萌的认为

因为支持用javascript开发原生应用，React Native一推出就受到不少公司热捧，各家都跃跃欲试。但有一个痛点是，在移动端，我们是否有必要开发多套程序：iOS、Android和H5？本次将通过对Moles框架的分享，介绍携程在React Native方面的实战干货，希望给大家一些灵感和启发。本次分享的内容包括三个方面：Moles框架在React Native和我们主Ap

自年初出版了《React Native移动开发实战2》之后，今年基本就没怎么关注RN了，一方面由于工作比较忙，另一方面我把时间主要用到了《Flutter跨平台应用开发实战》的写作上。最近由于时间比较空闲，所以回头看了下RN，目前RN已经更新到了0.63版本，延续了之前1-2个月更新一个小版本的周期。对比年初的0.60版本，RN在环境搭建方面做了很多的升级，总的来说，搭建RN的步骤变短了，新手的学习成本也降低了。目前，RN支持macOS和Windows，根据操作系统、针对的目标平台不同，RN环境搭建的步骤

react-native-router-flux 是一个基于 react-navigation 路由框架，简化了RN页面跳转的步骤，并且一直随着 react-navigation 升级更新版本。使用react-native-router-flux 框架，可以将全部的页面跳转的处理逻辑都写在一个地方，方便了后续的维护，下面是react-native-router-flux的源码地址：react-na...

最近在对《React Native移动开发实战》一书进行部分修订和升级。在React Native开发中，免不了会涉及到原生代码与JS层的消息传递等问题，那么React Native究竟是如何实现与原生的互相操作的呢？原生给React Native传参原生给React Native传值原生给JS传值，主要依靠属性，也就是通过initialProperties，这个RCTRootVi...

let命令基本用法ES6新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。{ let a = 10; var b = 1;}a // ReferenceError: a is not defined.b // 1上面代码在代码块之中，分别用let和var声明了两个变量。然后在代码块之外调用这两个变量，结果let声明的变量报错

1.安装Android Studio首先肯定是 安装Android Studio（包含SDK）(国内推荐)ps:这里有一点要注意，需要为SDK配置环境变量，名称必须为ANDROID_HOME2.安装Nodo.js（自带npm）从官网下载node.js的官方4.1版本或更高版本。安装完成后建议设置npm镜像以加速后面的过程（或使用科学上网工具），也可使用nrm具体参考链接。n

目前主流的移动跨平台技术方案大体可以分为三类，一类是使用原生内置浏览器加载HTML5的Hybrid技术方案，采用此种方案的主要有Cordova、Ionic和微信小程序；另一类是使用JavaScript语言进行开发，然后使用原生组件进行渲染，采用此方案的主要有React Native、Weex和快应用；最后一类是使用自带的渲染引擎和自带的原生组件来实现跨平台，采用此种方案的主要是Flutter。对于其他的浏览器方案，基本可以抛弃了，现在我们讨论移动跨平台开发主要说的是React Native和Flutter

众所周知，在多页面应用程序中，页面的跳转是通过路由或导航器来实现的。在0.44版本之前，开发者可以直接使用官方提供的Navigator组件来实现页面的跳转，不过从0.44版本开始，Navigator被官方从react native的核心组件库中剥离出来，放到react-native-deprecated-custom-components的模块中。如果开发者需要继续使用Navigator，则需要...

简介快速入门安装安装metro-core依赖主要有两种方式：npm和yarn。npm安装的命令如下：npm install --save-dev metro metro-coreyarn方式的安装命令如下：yarn add --dev metro metro-core运行metro bundle支持使用CLI脚手架方式运行和通过程序的编程调用它来运行。在程序中使用metro需...

概述RN作为一款非常优秀的移动端跨平台开发框架，在近几年得到众多开发者的认可。纵观现在接入RN的大厂，如qq音乐、菜鸟、去哪儿，无疑不是将RN作为重点技术栈进行研发。不过，熟悉RN的开发者也知道，早期的RN版本中打出来的包都只有一个jsbundle，而这个jsbundle里面包含了所有代码（RN源码、第三方库代码和自己的业务代码）。如果是纯RN代码倒没什么关系，但大部分的大厂都是在原生应用内接...

React Native作为时下最热门的跨平台开发方案，在这两年的移动跨平台方案中可谓一枝独秀，在很多的移动产品中都可以看到它们的影子，相比国内的Weex，RN的迭代更加频繁，性能上也无限的接近原生应用。不过，RN从性能上来说还是有提升的可能，所以，在今年的6月份，也即是Facebook刚刚发布了 React Native 0.56后，React工程经理 Sophie Alpert 在其官方博客上...

概述所谓单元测试，就是对每个单元进行的测试，一般针对的是函数、类或单个组件，不涉及系统和集成，单元测试是软件测试的基础测试，一个完备的软件系统都会涉及到单元测试。目前，Javascript的测试工具很多，但是针对React的测试主要使用的是Facebook推出的Jest框架，Jest是基于Jasmine的JavaScript测试框架，具有上手容易、快速、可靠的特点，是React.js默认的单元...

近年来，伴随着大前端概念的提出和兴起，移动端和前端的边界变得越来越模糊，涌现了一大批移动跨平台开发框架和模式。从早期的PhoneGap、inoc等Hybird技术，到现在耳熟能详的React Native、Weex和Flutter等技术，无不体现着移动端开发的前端化。而提供一套三端统一的开发框架，一直是前端奋斗的目标，而React Native就是这么一个不错的三端统一的跨平台开发框架，这方面的知...

在使用RN进行跨平台开发的过程中，经常会设计到跨平台调用相关的内容，而在于RN进行交互的时候，最核心的就是RN提供的Component和Module。 其中，Component是专门将Native的UI暴露出来供JS调用的，而Native Module则是将Native的模块暴露出来供JS调用的，其用途不一样。在实战开发中，由于RN实现的成本比较大，或者没办法实现，而原生是非常容易实现的，这时候...

移动跨平台框架React Native经过4年的发展，其生态已经变得异常丰富，在使用React Native开发项目的过程中，为了提高开发效率，我们经常会借鉴一些使用使用率比较高的开源库，根据大众的需求，对这些使用较高的 React-Native UI 库，我们做一个简单的总结和归类，方便大家更好地入门 React Native。第三方库UI套件1， NativeBaseN...

在做React Native开发的时候避免不了的需要原生模块和JS之间进行数据传递，原生模块向JS传递数据可以通过Callbacks、Promises和事件监听等三种方式来实现。Callbacks方式说起Callbacks大家都不陌生，它是最常用的设计模式之一。无论是Java，Object-c，C#，还是JavaScript等都会看到Callbacks的身影。原生模块支持Callbac...

React Native开发中，为了和ios效果保持一致，有些控件需要自己定义，如在警告弹框中，React Native本来已经提供了Alert控件，但是其效果在Android上是非常的丑陋的，所以为了满足产品同学的需要，只能自定义了。下面是其实现的效果： 实现也非常的简单，使用Modal来进行自定义控件即可，下面是相关的代码。import React, {Component} fr...

React Native（简称RN）列表是基于ScrollView实现的，也就是可以滚动的，然而RN并没有直接使用IOS或Android的原生列表组件，这是因为RN真正调用native代码的过程是异步的，二Native的渲染要求必须同步渲染的。在早期版本中，对于列表情况RN采用的是ListView组件，和Android一样，早期的ListView组件性能是非常的差的，在后来的版本中，RN提供了...

做过移动开发的同学都应该清楚，侧滑删除是移动开发中的一个常见功能。在官方没提供侧滑组件之前，要实现侧滑效果需要使用第三方库，如react-native-swipe-list-view。不过随着React Native 0.50版本的发布，系统新添加SwipeableFlatList组件，SwipeableFlatList是在FlatList基础上实现的侧滑显示菜单的功能，大大的方便了开发。Sw...

在移动开发中，特别是涉及到图片的应用开发中，经常会遇到图片预览等功能，并且预览支持图片的放大和缩小，在Android原生开发中可以使用PhotoViewPager库实现，如果在React Native中，可以选择使用react-native-image-viewer。先看一个实现的效果： 实例使用前需要先安装react-native-image-viewer库，安装命令如下：...

推送作为手机应用的基本功能，是手机应用的重要部分，如果自己实现一套推送系统费时费力，所以大部分的应用都会选择使用第三方的推送服务，如极光推送。下面就以React Native项目集成jpush-react-native 来讲讲如何集成极光的推送服务。JPush账号首先，登录极光官网系统，如果还没有账号可以注册一个，登录成功我们就可以创建和管理我们的应用了。 集成推送安装J...

搞过原生Android开发的同学都清楚，Android 在6.0版本对权限管理做了很大的升级，其类似于IOS的管理管理方式需要用手动授权是否允许使用当前权限，也即是：在6.0以下环境，在AndroidManifest.xml就可以在安装时自动获得，而在6.0以上环境，一些“危险”的权限则需要弹出提示框供用户选择。为了解决6.0以上动态权限申请的问题，React Native提供了Permissio...

在原生应用开发中，为了解决不同组件之间的数据交互问题，经常会用到广播，或者使用接口等方式，如Android的EventBus等框架。而在React Native中，则可以通过DeviceEventEmitter来实现。 例如有下面一个效果，用以模拟广播。 DeviceEventEmitter的用法和EventBus一样，都是观察响应模式。一个最简单的场景，A页面使用DeviceEventE...

SafeAreaView简介ReactNative官方从0.50.1版本开始，加入了针对iPhone X设备齐刘海页面适配的组件SafeAreaView，为ReactNative开发APP时对iPhone X的页面适配提供了很大的方便。目前，SafeAreaView只适合iOS设备。 SafeAreaView的使用也非常简单，只需要将SafeAreaView嵌套在最根级别的视图中即可，并且在...

组件生命周期众所周知，React Native是一个以组件为基本元素的开发框架，系统为我们提供了大量的现成的组件，我们也可以继承系统的Component和PurComponent自定义组件。既然是组件，那它就有自己的生命周期，通过不同的生命周期函数，我们可以干不同的事情。React Native将组件的生命周期分为如下几个阶段，总的概括起来有：挂载、存活和销毁几个阶段，涉及到的生命周期函数可以...

在过去的一年中React Native经历了从v0.40到v0.52的十几次的版本迭代，可以看到，特别是0.50之后，React Native的组件库在不断地壮大，React Native也正在越来越稳定。随着版本的升级，React Native引进了一些新的组件中，如FlatList、SectionList等具有更高性能的列表组件，也有与时俱进的用于适配全屏幕的SafeAreaView组件，...

最近，很多的公司，特别是小公司、小项目，为了解决人力成本的问题，都开发将移动原生开发转到了跨平台开发，或者原生+h5的混合开发，今天要说的是如何在原生项目中集成React Native。如果是一个新项目，并且以应用为主的，大可以使用React Native来进行开发，关于这方面的内容，不做讲解，读者可以查看我之前的博客，或者阅读《React Native》移动开发实战。1，安装Reac...

由于其他的原因，对于React Native相关的内容最近没有投入太多的关注，从去年年底出版了《React Native移动开发实战》后，对于React Native的关注就比较少了。最近由于公司之前的项目需要，所以React Native又重新回到我的世界，并且，最近出去面试深深的感觉到原生开发的饱和，不管是Android还是iOS，移动市场基本已经饱和，而更多的公司和开发者开始转向了前端，这对...