React Native

React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月 开源 了。 这个项目本身也越滚越大，从最早的UI引擎变成了一整套前后端通吃的 Web App 解决方案。衍生的 React Native 项目，目标更是宏伟，希望用写 Web App 的方式去写 Native App。 React Native 一经推出，就获得众多开发者的关注。React Native 使得 JavaScript 能够开发真正的 APP, 它不仅有着与原生应用相媲美的体验，同时拥有着 Web 应用的优势和开发效率。React Native 鲜明的特点就是组件化，一个应用都是多个组件构成；同时为了更高的效率，React Native 采用了内存 Dom tree Diff 计算，优化了 view 的渲染效率和体验。使用 JavaScript 开发跨终端的应用是未来的趋势。 那么，现在使用 React Native 开发能给开发者带去哪些便利，又会遇到哪些坑呢，又该在什么场景选择 React Native 呢？这篇文章整理了一些我们高手问答栏目中的相关问答内容以解决大家的疑惑。欢迎各位一起讨论、交流、学习。 一、React Native

1、需求 工作可能有这样的需求，就是手机浏览器中加载一个h5页面，点击可以打开某一个APP，比如微信等。这时候通常都是采用URL Scheme的方式进行配置跳转。 那么什么是URL Scheme呢？ 简单说：它是一个页面跳转协议。 2、 URL Scheme协议 URL Scheme是一种页面内跳转协议，是一种非常好的实现机制，通过定义自己的scheme协议，可以非常方便跳转app中的各个页面；通过scheme协议，服务器可以定制化告诉App跳转那个页面，可以通过通知栏消息定制化跳转页面，可以通过H5页面跳转页面等。 苹果手机中的APP都有一个沙盒，APP就是一个信息孤岛，相互是不可以进行通信的。但是iOS的APP可以注册自己的URL Scheme，URL Scheme是为方便app之间互相调用而设计的。 URL Scheme必须能唯一标识一个APP，如果你设置的URL Scheme与别的APP的URL Scheme冲突时，你的APP不一定会被启动起来。因为当你的APP在安装的时候，系统里面已经注册了你的URL Scheme。 完整的URL Scheme格式： stars://host:8088/pageDetail?pageId=102 1.stars:表示Scheme协议名称,可以自定义 2.host: 表示协议的跳转地址名称，通常和APP中配置的名称是一直的 3

摘要：重构前的技术文档调研与分析，包括技术选型为什么选择react，应用过程中的注意事项等。 一、为什么选择React React是当前前端应用最广泛的框架。三大SPA框架 Angular、React、Vue比较。 Angular出现最早，但其在原理上并没有React创新的性能优化，且自身相对来说显得笨重。 Vue出现最晚，其核心原理学习了React，只是语法形式的变化，关系上来说React是开拓者，Vue是学习者。 React社区有强大活力与创新能力，不断涌现革命性的创新产品，其中包括可以使用JS操作原生控件的React Native，Vue后来跟进学习出了类似的Weex，但两者成熟度差很多。 目前来看React的生态系统要比Vue大的多，在github、stackoverflow等最大的技术社区搜索两者，React的搜索结果是Vue的十倍左右，另外据近期统计使用React的站点是Vue的几百倍以上。更大的生态意味着更多可用的资源，以及遇到问题可以得到更多的有效参考与帮助，这也是除了性能之外选择React的核心原因。 选择React之后，应用会在以下几个方面有提升。 第一，原先的html间跳转会有短暂的白屏现象，这一点在安卓性能较差的机器上尤为明显，而React作为单页应用没有这个问题。 第二，React 提供的虚拟DOM包含Diff算法，即将原dom copy一份

摘要：重构前的技术文档调研与分析，包括技术选型为什么选择react，应用过程中的注意事项等。 一、为什么选择React React是当前前端应用最广泛的框架。三大SPA框架 Angular、React、Vue比较。 Angular出现最早，但其在原理上并没有React创新的性能优化，且自身相对来说显得笨重。 Vue出现最晚，其核心原理学习了React，只是语法形式的变化，关系上来说React是开拓者，Vue是学习者。 React社区有强大活力与创新能力，不断涌现革命性的创新产品，其中包括可以使用JS操作原生控件的React Native，Vue后来跟进学习出了类似的Weex，但两者成熟度差很多。 目前来看React的生态系统要比Vue大的多，在github、stackoverflow等最大的技术社区搜索两者，React的搜索结果是Vue的十倍左右，另外据近期统计使用React的站点是Vue的几百倍以上。更大的生态意味着更多可用的资源，以及遇到问题可以得到更多的有效参考与帮助，这也是除了性能之外选择React的核心原因。 选择React之后，应用会在以下几个方面有提升。 第一，原先的html间跳转会有短暂的白屏现象，这一点在安卓性能较差的机器上尤为明显，而React作为单页应用没有这个问题。 第二，React 提供的虚拟DOM包含Diff算法，即将原dom copy一份

摘要：重构前的技术文档调研与分析，包括技术选型为什么选择react，应用过程中的注意事项等。 一、为什么选择React React是当前前端应用最广泛的框架。三大SPA框架 Angular、React、Vue比较。 Angular出现最早，但其在原理上并没有React创新的性能优化，且自身相对来说显得笨重。 Vue出现最晚，其核心原理学习了React，只是语法形式的变化，关系上来说React是开拓者，Vue是学习者。 React社区有强大活力与创新能力，不断涌现革命性的创新产品，其中包括可以使用JS操作原生控件的React Native，Vue后来跟进学习出了类似的Weex，但两者成熟度差很多。 目前来看React的生态系统要比Vue大的多，在github、stackoverflow等最大的技术社区搜索两者，React的搜索结果是Vue的十倍左右，另外据近期统计使用React的站点是Vue的几百倍以上。更大的生态意味着更多可用的资源，以及遇到问题可以得到更多的有效参考与帮助，这也是除了性能之外选择React的核心原因。 选择React之后，应用会在以下几个方面有提升。 第一，原先的html间跳转会有短暂的白屏现象，这一点在安卓性能较差的机器上尤为明显，而React作为单页应用没有这个问题。 第二，React 提供的虚拟DOM包含Diff算法，即将原dom copy一份

摘要：重构前的技术文档调研与分析，包括技术选型为什么选择react，应用过程中的注意事项等。 一、为什么选择React React是当前前端应用最广泛的框架。三大SPA框架 Angular、React、Vue比较。 Angular出现最早，但其在原理上并没有React创新的性能优化，且自身相对来说显得笨重。 Vue出现最晚，其核心原理学习了React，只是语法形式的变化，关系上来说React是开拓者，Vue是学习者。 React社区有强大活力与创新能力，不断涌现革命性的创新产品，其中包括可以使用JS操作原生控件的React Native，Vue后来跟进学习出了类似的Weex，但两者成熟度差很多。 目前来看React的生态系统要比Vue大的多，在github、stackoverflow等最大的技术社区搜索两者，React的搜索结果是Vue的十倍左右，另外据近期统计使用React的站点是Vue的几百倍以上。更大的生态意味着更多可用的资源，以及遇到问题可以得到更多的有效参考与帮助，这也是除了性能之外选择React的核心原因。 选择React之后，应用会在以下几个方面有提升。 第一，原先的html间跳转会有短暂的白屏现象，这一点在安卓性能较差的机器上尤为明显，而React作为单页应用没有这个问题。 第二，React 提供的虚拟DOM包含Diff算法，即将原dom copy一份

方法一： 创建不同的文件扩展名： *.android.js *.io.js 方法二： import { Platform } from 'react-native'; if (Platform.OS === 'android') { // Do something specific for Android } else if (Platform.OS === 'ios') { // Handle iOS } marginTop: Platform.OS === 'ios' 10 : 0, paddingBottom: Platform.OS === 'android' 8 : 0 方法三： const myStyle = Platform.select({ios:{},android:{}) const myFn = Platform.select({ios:()=>{},android:()=>{}) myFn(); 方法四： if (UIManager.setLayoutAnimationEnabledExperimental) { UIManager.setLayoutAnimationEnabledExperimental(true); } 来源： oschina 链接： https://my.oschina.net/u/4225199/blog/3135188

这个讲的是React Native完整的原生开发环境。 这个环境的搭配，会根据你使用的操作系统、针对的目标平台不同，具体的搭配步骤就会有所不同；如果想同时开发iOS和Android也是没有问题的，你需要先选一个平台开始，对于另一个平台的环境搭建只是稍有不同。 开发平台：macOS、Windows、Linux 目标平台：iOS、Android React Native macOS Android 搭建开发环境： (1)安装依赖 必须安装的依赖有：Node、Watchman和React Native命令行工具以及JDK和Android Studio。 虽然可以使用任何的编辑器来开发应用（编写js代码），但你仍然必须安装Android Studio来获得编译Android应用所需的工具和环境。 我们推荐使用 Homebrew 来安装Node和Watchman，在命令行中执行下列命令： brew install node brew install watchman 注意：如果你已经安装了Node，请检查其Node版本是否在v8.3以上；安装完了Node后建议设置npm镜像以加快后面的过程。 还有需要注意的是不要使用cnpm安装！！！，因为cnpm安装的模块路径比较奇怪，packager不能正常识别。 npm config set registry https://registry.npm

入门级 （ Mac） 一、React开发工程化（ 使用 Webpack 4 和 Babel 7 从头开始创建 React 应用程序） 配置 Webpack 配置 React 和 Babel 配置 webpack-dev-server 配置 CSS 配置 Webpack 1.创建一个新项目并进入： mkdir react_project && cd react_project 2.创建 package.json 文件 npm init -y 3.安装 webpack 和 webpack-cli 作为 dev 依赖项 npm i webpack@4 webpack-cli@3 -D i：install -D：- save-dev 注：在 webpack 3 中，webpack 和它的 CLI 都是在同一个包中，但在第4版中，他们已经将两者分开来更好地管理它们。所以安装时，最好是 webpack 和 webpack-cli 同时安装 4.更新 package.json 文件 { "name": "react_project", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "webpack --mode development", "build": "webpack -

动态配置 由于 AppStore 审核周期的限制，如何动态的更改 app 成为了永恒的话题。无论采用何种方式，我们的流程总是可以归结为以下三部曲：“从 Server 获取配置 --> 解析 --> 执行native代码”。 很多时候，我们自觉或者不自觉的利用 JSON 文件实现动态配置的效果，它的核心流程是： 通过 HTTP 请求获取 JSON 格式的配置文件。 配置文件中标记了每一个元素的属性，比如位置，颜色，图片 URL 等。 解析完 JSON 后，我们调用 Objective-C 的代码，完成 UI 控件的渲染。 通过这种方法，我们实现了在后台配置 app 的展示样式。从本质上来说，移动端和服务端约定了一套协议，但是协议内容严重依赖于应用内要展示的内容，不利于拓展。也就是说，如果业务要求频繁的增加或修改页面，这套协议很难应付。 最重要的是，JSON 只是一种数据交换的格式，说白了，我们就是在解析文本数据。这就意味着它只适合提供一些配置信息，而不方便提供逻辑信息。举个例子，我们从后台可以配置颜色，位置等信息，但如果想要控制 app 内的业务逻辑，就非常复杂了。 记住，我们只是在解析字符串，它完全不具备运行和调试的能力。 React 不妨暂时抛弃移动端的烦恼，来看看前端的“新玩意”。 背景 作为前端小白，我以前对前端的理解是这样的： 用 HTML 创建 DOM，构建整个网页的布局