皮皮网

1.如何评价 React Native
2.React Native UI界面还原，组件布局与动画效果
3.React Native 0.74 Android 环境搭建指南
4.Expo 搭建 React-native 项目代码目录分析
5.如何编译ReactNative示例程序Examples

如何评价 React Native

       React native充分利用了Facebook的现有轮子，是一个很优秀的集成作品，并且我相信这个团队对前端的了解很深刻，否则不可能让Native code「退居二线」。

       å¯¹åº”到前端开发，整个系统结构是这样：

       JSX vs HTML

       CSS-layout vs css

       ECMAScript 6 vs ECMAScript 5

       React native View vs DOM

       æ— éœ€ç¼–译，我在第一次编译了ipa装好以后，就再也没更新过app，只要更新云端的js代码，reload一下，整个界面就全变了。

       å¤šæ•°å¸ƒå±€ä»£ç éƒ½æ˜¯JSX，所有Native组件都是标签化的，这对于前端程序员来说，降低了不少学习成本，也大大减少了代码量。不信你可以看看JSX编译后的代码。

       å¤ç”¨React系统，也减少了一定学习和开发成本，更重要的是利用了React里面的分层和diff机制。js层传给Native层的是一个diff后的json，然后由Native将这个数据映射成真正的布局视图。

       css-layout也是点睛之笔，前端可以继续用熟悉的类css方式来编写布局，通过这个工具转换成constrain布局。

       ç³»

       ç»Ÿåªæœ‰js-objc的单向调用，就是把原生UI组件的方法通过javascritcore或者webview（低版本iOS）映射到js中来，整个调用

       è¿‡ç¨‹æ˜¯å¼‚步的，这样的设计令React native可以让js运行在桌面chrome中，通过websocket连接Native

       code和桌面chrome，极大地方便了调试。对其中的机制Bang的一篇文章写得很详细，我就不拾人牙慧了：React Native通信机制详解 « bang’s blog 。但这样设计也会带来一些问题，后面说。

       ç‚¹æŒ‰æ“ä½œä¹Ÿè¢«æŠ½è±¡æˆäº†ä¸€ç»„组件（TouchableXXX），这种抽象方式是我在之前做类似工作中没有想到的。facebook还列出Native为什么和web「手感」不同的原因：实时的点按反馈和取消能力。React Native 这套相应机制设计得很完善，能像Native code那样控制整个点按操作的所有过程。

       Debug

       ç›¸å½“方便！修改了js以后，通过内建的nodejs

       watcher编译成bundle，在模拟器里面按cmd+r就可以看到效果。而且按cmd+d，可以打开一个chrome窗口，所有的js都移到了

       chrome里面运行，所以什么断点单步打调用栈，都不在话下。

       ä¸Šé¢çš„既是特点也是优点，下面说说缺点，或者应该说：「仍然遗留的问题」，在我看来，这个方案已经超越了Hybird方案。

       ç³»

       ç»Ÿä»ç„¶ï¼ˆä¸å¾—不）依赖原生组件暴露出来的组件和方法。举两个例子，ScrollView这个组件，在Native层是有大量事件

       çš„，scrollViewWillBeginDragging，

       scrollViewWillEndDragging，scrollViewDidEndDragging等等，这些事件在现有的版本都没有暴露，基本上

       åšä¸äº†ç»„件联动效果。另外，这个版本中有大量组件是iOS

       only的：ActivityIndicatorIOS、DatePickerIOS、NavigatorIOS、PickerIOS、

       SliderIOS、SwitchIOS、TabBarIOS、AlertIOS、AppStateIOS、LinkingIOS、

       PushNotificationIOS、StatusBarIOS、VibrationIOS，反过来看，剩余的都是一些抽象程度极强的基本组件。这

       æ ·ï¼Œç”¨æˆ·å¿…须在不同的平台下写两套代码，而且所有能力仍然强烈依赖 React native 开发人员暴露的接口。

       ç”±äºŽæœ€å¤–层是

       React，初次学习成本高，不像往常的Hybird方案，只要多学几个JS

       API就可以开始干活了。当然，React的确让后续开发变得简单了一些，这么一套外来的（基于iOS）、残缺不全的（css-layout）在

       React的包装下，的确显得不那么面目可憎了。

       å¦å¤–，React Native仍然很不完善。文档还不全，我基本上是看着他的示例代码完成的demo，集成到已有app的文档也是今天才出来。按照官方的说法，Android版本要到半年后才发布：Blog | React ，届时整个系统设计可能还会有很大的变化。

       PS，在使用Tabbar的时候，我惊喜的发现他们居然用了iconfont方案，我现在手头的项目中也有同样的实现，不过API怎么设计一直很头疼。结果，我发现他是这么写的：

       <TabBarItemIOS

        name="blueTab"

        icon={ _ix_DEPRECATED('favorites')}

       ....>

       åœ¨ _ix_DEPRECATED 的定义处，有一句注释： // TODO(nicklockwood): How can this fit our require system?

       ä»¥ä¸Šã€‚

       ä¸‹é¢æ˜¯ä¸€å‘¨å‰ï¼Œåœ¨React native还没开源的时候，通过反解ipa的一些分析过程，有兴趣的可以看看。

       ------------------------简单粗暴的分割线--------------------

       èƒŒæ™¯å’Œè°ƒç ”手段

       React

        Native还没开源，最近和组里兄弟「反编译」了Facebook Group（这个应用是用React

       Native实现的）的ipa代码，出来几百个JS文件，格式化一下，花了几天时间读了一下源码，对React

       Native的内部核心机制算是有了一个基本了解。

       React Native的核心实现：

       å…ˆç®€å•è¯´å‡ ç‚¹ï¼Œè¯¦ç»†çš„等回头更新。

       1. React Native里面没有webview，这货不是Hybrid app，里面执行JS是用的

       JavascriptCore。

       2. 再说React Native的核心，iOS Native code提供了十来个最基本核心的类（RCTDeviceEventEmitter、

       RCTRenderingPerf等）、或组件（RCTView、RCTTextField、RCTTextView、

       RCTModalFullscreenView等），然后由React Native的JS部分，组成二十来个基本组件（Popover、Listview等），交由上层的业务方来使用（THGroupView）。

       3. 就如他们在宣传时所说，他们实现了一套类似css的子集，用来解决样式问题，相当复杂和强大，靠这个才能将Native的核心组件组成JS层的基本组件再组成业务端的业务组件，应该是采用facebook/css-layout · GitHub的C语言版本实现的（在ppt中我们看到了类似flex-direction: column一类的代码，这个正是css-layout支持的语法）。

       4. 在React Native中，写JS的工程师解决的是「将基本组件拼装成可用的React组件」的问题，写Native Code的工程师解决的是「提供核心组件，提供足够的扩展性、灵活性和性能」的问题。

       React Native的设计考虑：

       ReactJS对React Native有着直接的影响（我没在生产环境中用过React，只看过代码&用过Angular，如果有误请指出）

       ReactJS里面有这样的设计：

       1. ReactJS 的大工厂入口createElement返回的不是某个实体DOM对象，而只是一个数组

       2. 通过源码中 ui/browser/ 目录中的代码，将这个数组转换成DOM

       3. 底层的渲染核心是可以更换的

       å¦å¤–，Facebook自己有JSX，css-layout等开源项目，基于这些，如果要做一个用 JS来开发Native app的东西，很自然就想到了一套最有效率的搞法：

       1. 将 ui/browser 里面的代码替换成一套 Native 的桥接JS（实际上，iOS版是通过

       injectGenericComponentClass方法，将核心组件的方法注入到JS里面 ），就直接复用React的MVVM，自动将数据映射到Native了

       2.

        Native

       code里面实现三组核心API，一组提供核心组件的API（create、update、delete），一组事件方法（ReactJS里面的

       EventEmitter ），一组对css进行解析（css-layout）以及返回Style的ComputedStyle（React

       Native里面叫meatureStyle）。

       è¿™æ ·ï¼Œç”¨ä¸Šäº†ReactJS本身的所有核心功能和设计思路，Native的开发也足够简单。

       é‚£ï¼ŒReact Native是什么？

       å…¶å®žè¿™ä¸œè¥¿ä»ŽNative开发来说，相当于重新发明了一个浏览器渲染引擎并且套一个React的壳，从Web开发角度来说，就是把原来React的后端换成了Native code来实现，就跟Flipboard最近搞的React Canvas 一样： Flipboard · GitHubreact-canvas

       React Native的优势和劣势：：

       ä¼˜åŠ¿ç›¸å¯¹Hybird app或者Webapp：

       1. 不用Webview，彻底摆脱了Webview让人不爽的交互和性能问题

       2. 有较强的扩展性，这是因为Native端提供的是基本控件，JS可以自由组合使用

       3. 可以直接使用Native原生的「牛逼」动画（在FB Group这个app里面，面板滑出带一点果冻弹动，面板基于某个点展开这种动画随处可见，这种动画用Native code来做小菜一碟，但是用Web来做就难上加难）。

       ä¼˜åŠ¿ç›¸å¯¹äºŽNative app：

       1. 可以通过更新远端JS，直接更新app，不过这快成为各家大型Native app的标配了…

       åŠ£åŠ¿ï¼š

       1. 扩展性仍然远远不如web，也远远不如直接写Native code（这个不用废话解释了吧）

       2.

       ä»ŽNative到Web，要做很多概念转换，势必造成双方都要妥协。比如web要用一套CSS的阉割版，Native通过css-layout拿到最终样

       å¼å†è½¬æ¢æˆnative原生的表达方式（比如iOS的Constraint\origin\Center等属性），再比如动画。另外，若Android和

       iOS都要做相同的封装，概念转换就更复杂了。

       æ›´æ–°1：添加了React对React Native的影响。

       æ›´æ–°2：基本确定其使用了 css-layout，添加了对React Native的总结

       æ›´æ–°3: React native已经开源了： React Native，只有iOS版。我写了几个demo，简单看了看objc代码并和开源前的我们的一些结论（见后文）交叉验证。简单地从前端工程师和系统整体角度说一下React native的特点和优劣吧。

       æ›´æ–°4: 补充了几条优势和与前端开发的对照

React Native UI界面还原，组件布局与动画效果

       React Native UI与Android XML布局的对比，显示了两者之间的相似性。在《ReactJS到React-Native，架构原理概述》一文中提到，装潢网站源码React框架在Web环境中，通过最终渲染到浏览器的真实DOM中。而在React Native环境中，通过编译后的JSX源码与对应平台的Bridge通信，实现与原生框架的交互。如果在程序中调用React Native API，React Native框架通过Bridge调用原生框架方法。

       React Native底层为React框架，UI层的变更映射至虚拟DOM进行diff算法，计算变动后的JSON文件，最终由原生层渲染到iOS与Android平台的页面元素上。编写React Native代码最终生成main.bundle.js文件，支持本地或服务器下载。Yoga，购买unity核心源码一个C语言编写的CSS3/Flexbox跨平台布局引擎，旨在实现iOS、Android、Windows平台的布局兼容，通过API向开发者开放，简化界面布局。

       React Native核心组件与API提供了丰富的UI构建基础，样式方面支持通过JavaScript添加样式表，Flexbox布局提供了响应式App的最佳选择，但在样式一致性上与Web应用存在差异。Weex等开源项目利用了React和宿主平台间的桥接，实现了一个简化版的CSS子集，主要通过flexbox布局，与Android的LinearLayout相似，但Flex布局在优先级上高于宽度。

       动画系统包括Animated和LayoutAnimation，Animated以声明方式定义动画输入与输出，封装6个组件，实现效率优化。惠赞联盟源码配置动画具有灵活性，支持自定义或预定义的 easing 函数、延迟、持续时间等。组合动画可实现同时执行、顺序执行、延迟等效果。合成动画值和插值功能丰富了动画控制。跟踪动态值和启用原生动画驱动提供了更高效、独立于JS线程的动画执行。

       LayoutAnimation允许全局范围内创建和更新动画，无需测量或计算特定属性，适用于更新flexbox布局的动画。注意，尽管LayoutAnimation强大，但对动画控制不如Animated等库方便，且在不同驱动方式间不兼容。若需在Android上使用LayoutAnimation，需在UIManager中启用。微课源码文件

React Native 0. Android 环境搭建指南

       在移动应用开发领域，我们拥有多种选择，包括原生开发、混合开发和H5开发。其中，混合开发领域中，我们能够利用React Native与Android或iOS结合，创造出可在不同平台运行的移动应用。

       本文将基于React Native 0.版本的官方文档，分步骤指导大家搭建React Native 0.的Android环境，并分享可能遇到的常见问题及解决方案。最终目标是构建出一个功能齐全的React Native Android应用。

       我们使用的是以下环境：mac m1、java、react native 0.、android sdk 、ndk 、Android Studio Iguana | .2.1 Patch 1。希望这篇文章能帮助大家在开发移动应用时少走弯路，FPGA在线升级源码更加得心应手。

       搭建过程分为四个主要步骤：安装依赖、初始化项目、运行项目和打包发布。

       第一步 安装依赖

       遵循官方指南，我们选择安装macOS和Android原生构建教程所需的工具。

       1.1 安装Node、Watchman

       确保Node版本为，推荐使用nvm（Node Version Manager）管理Node版本，以便切换至Node。

       1.2 安装JDK

       如果电脑上已有JDK1.8版本，请确保替换为React Native 0.所需的版本。通过运行命令查看所有安装的JDK版本，若不符合要求，需按照官方指南安装相应版本的JDK。推荐使用Zulu OpenJDK以提高性能和稳定性。

       1.3 安装Android Studio

       依据官方Android教程，安装Android编辑器、Android SDK和Android虚拟设备，为后续开发做好准备。

       第二步 初始化项目

       首先删除本地react-native，然后初始化项目。

       初始化项目

       项目结构如下：

       完成根目录下的yarn i操作，下载所有npm依赖。

       第三步 运行项目

       执行命令启动React Native服务，安装Android相关依赖，结合Android源码和配置生成apk文件，并将其安装至模拟器中运行。

       解决依赖安装问题

       依赖需要设置为google地址和aliyun，避免网络问题影响依赖安装。若遇到ndk版本对应错误，需在Android编辑器中下载相应ndk版本。确保依赖版本与Android源码下的build.gradle文件声明一致。

       第四步 打包发布版本

       目标是生成apk和aab版本，其中aab用于发布到应用商店，而apk可以直接安装到Android设备。

       应用签名

       无论是向应用商店提交还是直接安装到手机，都需要对应用进行签名。在初始化项目时，应用采用debug.keystore进行签名，生成app-debug.apk。对于发布版本，需生成发布版本的证书文件。在macOS上，通过执行特定命令找到JDK目录，使用具有sudo权限的keytool命令生成证书文件，重命名后放置在安卓app目录下。解决在配置过程中遇到的提示问题，新建keystore.properties文件，重新编写构建配置，并修改signConfigs进行读取。注意debug和release使用同一签名以避免在调试和发布时包名不一致导致无法覆盖安装。

       构建发布版本

       使用命令生成release apk版本，使用另一命令生成aab版本，用于应用商店发布。最终，apk可直接安装到手机上，手机系统将进行证书检测和认证。

       总结本文，我们通过依赖安装、项目初始化、项目运行和打包发布四个步骤详细阐述了React Native 0. Android环境的搭建过程。对于前端工程师而言，Android环境配置的难点在于其细节，但深入了解Android官网原理后，将对后续混合应用开发大有裨益。

Expo 搭建 React-native 项目代码目录分析

       创建React-native项目时，Expo提供了多种工具简化开发过程。根据项目需求，选择不同的模板：空白模板（blank）适合演示、组件预览和个人项目；带有底部tab菜单的模板（tabs）；需要直接控制原生代码时选择（minimal）；遇到未知问题则选择RN方式。[1]

       React Native的典型目录结构包括以下几个部分：[2]

       src：存放组件源代码，是项目开发的核心目录。

       test：用于编写和运行组件的测试用例。

       demo：包含一个独立的Expo项目，App.js是核心文件，通过引用src中的组件进行展示和开发。

       其他文件如.eslintrc.js, babel.config.js, README.md, .gitignore, package.json等，分别负责代码风格规范、编译配置、项目介绍和版本管理。

       引入Expo时，需注意src目录与demo目录的配置协调，以确保metro（打包工具）能够正确处理。首先安装Expo CLI，然后创建项目，通过yarn start预览组件。配置metro时，重点在于新版本的metro.config.js，用于添加providesModuleNodeModules，解决src目录依赖的解析问题。[3]

       总结起来，开发过程中App.js是关键，负责组件的集成和展示。app.json和package.json分别用于设置应用配置和依赖管理。assets存放资源文件，babel.config.js用于代码转换，index.js是应用入口，metro.config.js负责项目打包，而yarn.lock则保证了依赖版本的一致性。eas.json则提供了EAS平台的云构建和部署选项。每个文件都有其特定的功能，共同构建React-native项目的开发流程。[4]

如何编译ReactNative示例程序Examples

       ã€€ã€€ç¼–译示例程序需要将整个项目导入到androidStudio中，androidStudio导入项目时选择react-native/ReactAndroid目录。

       ã€€ã€€ç”±äºŽé¡¹ç›®ä¾èµ–ndk因此如果要编译Examples还需要安装配置ndk目录，下载ndk后是一个自解压程序，会释放ndk的目录。

       ã€€ã€€ç„¶åŽéœ€è¦è®¾ç½®çŽ¯å¢ƒå˜é‡æˆ–者在react-native根目录下新建local.properties文件，文件内容如下：

       ã€€ã€€sdk.dir=c:\你的sdk目录

       ã€€ã€€ndk.dir=c:\你的ndk目录

       ã€€ã€€è®¾ç½®è¦ä¹‹åŽå°±å¯ä»¥ç¼–译了，导入和编译的过程比较曲折，请继续看下文。

       ã€€ã€€åœ¨ç¼–译AwesomeProject项目时，没有用到ndk，实际上这里的ndk默认情况下并没有用到，只是gradle的设置里有ndk因此必须配置ndk才能导入项目。

       ã€€ã€€ndk是在编译核心库是才用到，核心库位于react-native/ReactAndroid，导入整个项目时以lib形式存在。查看Examples目录下UIExplorer，会发现在build.gradle是以在线的方式导入核心库的。通过源码的方式导入被注释掉了。

       ã€€ã€€dependencies {

       ã€€ã€€compile fileTree(dir: 'libs', include: ['*.jar'])

       ã€€ã€€compile 'com.android.support:appcompat-v7:.0.1'

       ã€€ã€€// Depend on pre-built React Nativecompile 'com.facebook.react:react-native:0..+'

       ã€€ã€€// Depend on React Native source.

       ã€€ã€€// This is useful for testing your changes when working on React Native.

       ã€€ã€€// compile project(':ReactAndroid')

       ã€€ã€€}

       ã€€ã€€ç”±æ­¤å¯çŸ¥ï¼Œç¼–译UIExplorer并不需要ndk，如果你不想设置ndk，有2个办法

       ã€€ã€€1.拷贝AwesomeProject项目中的build.gradle，settings.gradle到UIExplorer的android目录，在导入项目时选择UIExplorer/android就可以了，这样androidStudio会导入单个项目，否则会导入整个项目。

       ã€€ã€€2.用androidStudio新建一个同名的项目，然后把UIExplorer目录中的文件拷贝到新建的项目中。

       ã€€ã€€ç¼–译好之后启动服务器端，到react-native目录下执行:

       ã€€ã€€npm install

       ã€€ã€€node packager\packager.js

       ã€€ã€€windows下如果出现错误需要根据错误提示修改代码blogs.com/zhaojietec/p/.html

       ã€€ã€€ä¸è¿‡éœ€è¦æ³¨æ„çš„是，目前为止，UIExplorer在Android下有一个bug，IOS下没有问题，通过google可以找到了解决办法。/facebook/react-native/issues/

       ã€€ã€€åŽŸå› æ˜¯ï¼Œjs代码和android原生代码不同步，通过build.gradle可以看到android下的引用的reactNative核心库为，而js代码版本已经更新到了。

       ã€€ã€€è§£å†³çš„办法有2个，一个是使用git工具(如smartGit)，将js代码恢复到之前的版本，另一个办法是重新编译reactNative的核心库，编译核心库需要ndk，在mac下没有问题，在windows编译会出错。编译reactNative核心库，对UIExplorer下注释掉的依赖项进行修改即可，编译速度较慢 需要在线下载第三方依赖库。

       ã€€ã€€dependencies {

       ã€€ã€€compile fileTree(dir: 'libs', include: ['*.jar'])

       ã€€ã€€compile 'com.android.support:appcompat-v7:.0.1'

       ã€€ã€€// Depend on pre-built React Native//compile 'com.facebook.react:react-native:0..+'

       ã€€ã€€// Depend on React Native source.

       ã€€ã€€// This is useful for testing your changes when working on React Native.

       ã€€ã€€compile project(':ReactAndroid')

       ã€€ã€€}

       ã€€ã€€ç”±äºŽwindows下无法编译，所以这里提供编译好的aar文件，修改UIExplorer build.gradle中的依赖项就可以了。至于如何引入aar文件，可以自行搜索。当然mac下同样也可以用这个aar，可以省去不少麻烦。