本文讲的是一种在 React Web 和 React Native 共享应用程序逻辑,但在每个平台保持独立的渲染特性的方法。示例应用程序可以在 这里 上找到。
为什么使用react native?
既拥有Native的用户体验、又保留React的开发效率。——引自React
Native的发布稿
react
native通过一次编写可以在IOS和Android设备上运行。这样可以为公司节约成本,使代码更好维护。(不用再招2大客户端的程序员、代码也不需要维护2套,但现在还有一些组件是属于IOS或者Android专有的所以请尽量选择使用那些用JavaScript编写的组件)。只要熟悉web开发,就可以成为潜在的客户端开发者。使用单一的JavaScript库就能写出真正的原生的iOS和Android的应用来。当然学习react时需要理解其中的概念,还是有些时间成本。那么什么又是react
native呢?请往下看。
React Native:
什么是react native?
Facebook在2015年发布了react native的第一个版本。可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App。只要编写一次,能在任何手机端上跑。
Build Native Mobile Apps using JavaScript and React。
react native 仅仅使用JavaScript就能让你编写一个原生的手机App。使用起来有点像React,让你使用组件式的形式编写手机App。
它看起来像下面这个样子。import React, { Component } from 'react'; import { Text, View } from 'react-native'; class WhyReactNativeIsSoGreat extends Component { render() { return ( <View> <Text> If you like React on the web, you'll like React Native. </Text> <Text> You just use native components like 'View' and 'Text', instead of web components like 'div' and 'span'. </Text> </View> ); } }
使用react native编写的app是一个真的手机App
使用react native,你不用编写一个“mobile web app”或者 “HTML5 app”,你所编写的App都是从 Objective-C 或者 Java原生而来。react native使用一些基本的UI组件去构成IOS和Android的App。你只需使用JavaScript 和 react把这些组件组装在一起。
例如像下面这样一个例子,创建了一个可滑动的视图。
import React, { Component } from 'react';
import { Image, ScrollView, Text } from 'react-native';class AwkwardScrollingImageWithText extends Component { render() { return ( <ScrollView> <Image source={{uri: 'https://i.chzbgr.com/full/7345954048/h7E2C65F9/'}} /> <Text> On iOS, a React Native ScrollView uses a native UIScrollView. On Android, it uses a native ScrollView. On iOS, a React Native Image uses a native UIImageView. On Android, it uses a native ImageView. React Native wraps the fundamental native components, giving you the performance of a native app, plus the clean design of React. </Text> </ScrollView> ); } }
不要把时间浪费到重新编译上
react native能让你快速的编写一个app,在重新编译这块,你可以立刻看到看到你修改的效果。使用热重载技术,你甚至可以在运行新的代码,并且保留应用的状态。热重载技术
需要时可以使用原生的代码
react native可以毫不费力的,与Objective-C、java、swift写的原生组件桥接起来。
import React, { Component } from 'react';
import { Text, View } from 'react-native';
import { TheGreatestComponentInTheWorld } from './your-native-code';class SomethingFast extends Component { render() { return ( <View> <TheGreatestComponentInTheWorld /> <Text> TheGreatestComponentInTheWorld could use native Objective-C, Java, or Swift - the product development process is the same. </Text> </View> ); } }
React
Native
如何初始化你的第一个react native项目
由于操作系统的原因,和环境的问题,暂时演示,IOS App的初始化
- 需要node.js, React Native 命令行工具和Watchman
推荐使用Homebrew安装node.js和Watchman。
brew install node
brew install watchman
- 使用npm安装 React Native 命令行工具接口
npm install -g react-native-cli
- 测试安装react native项目
使用react native命令行工具生成一个新的react native项目,命名为MyFirstRNApp,然后进入项目的根目录,运行react-native run-iso命令
react-native init MyFirstRNApp
cd MyFirstRNApp
react-native run-ios
react-native init MyFirstRNApp
初始化中的MyFirstRNApp

初始化MyFirstRNApp成功
react-native run-ios
编译中

编译成功后弹出,react native控制台页面

第一个react native项目页面
React Web:
react native项目结构介绍
在项目根目录下有3个文件夹,2个js文件,一个json文件
- 文件夹 android
主要存放关于项目android的文件 - 文件夹 ios
主要存放关于项目ios的文件 - 文件夹 node_modules
存放的是一些项目依赖包 - index.android.js
为安卓 app的入口文件 - index.ios.js
为iOS app的入口文件 - package.json
为该项目依赖包的管理文件
react native项目结构图
index.ios.js 入口文件解析
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*///es6的语法格式 import React, { Component } from 'react'; import { AppRegistry, //入口文件必备,提供整个app组件注册的功能 StyleSheet, //样式表 Text, //react native 提供的组件 Text View //react native 提供的组件 View } from 'react-native'; //js的类文件 class MyFirstApp extends Component { //渲染返回包装好的组件 render() { //返回包装好的组件 return ( <View style={styles.container}> /*相当于div*/ <Text style={styles.welcome}> Welcome to React Native! </Text> <Text style={styles.instructions}> To get started, edit index.ios.js </Text> <Text style={styles.instructions}> Press Cmd+R to reload,{'n'} Cmd+D or shake for dev menu </Text> </View> ); } } //样式表文件 const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, instructions: { textAlign: 'center', color: '#333333', marginBottom: 5, }, }); AppRegistry.registerComponent('MyFirstApp', () => MyFirstApp);
以上这就是使用JavaScript和react构建的一个原始App的代码,很简单吧。
React
Web
浅析react native架构
react native 架构
- 1.在不同平台上使用js和jsx语法编写react代码,js解释器可以在不同平台运行。
- 2.通过虚拟DOM更新和刷新状态进行对组件的重新渲染
- 3.将结果展示到不同的终端
jsx
jsx是JavaScript的语法延伸,看起来像XML结构。目前react native支持ES6的语法。
虚拟DOM
React中的DOM并不保证马上影响真实的DOM,react会等到事件循环结束,利用diff算法,通过当前新DOM树与之前的DOM树作比较,计算出最小的步骤更新真实的DOM。这样做的好处是性能得到了很大的保证。
这个应用程序本身是一个非常简单的 Hello World 应用程序。它不仅会显示"Hello World",而且当你点击它时,颜色会从红色改变成蓝色!哇!
总结
本文对react native是什么,能做什么,做了一个大致的了解,并创建了一个全新的react native项目并成功编译运行,了解了项目中的结构,和接口文件中的内容。浅析了react native架构,理解了LEARN ONCE, WRITE ANYWHERE的道理。简单阐述了,当前版本所支持的语法版本,和解释什么是虚拟DOM,和它的作用。
成熟案例
https://facebook.github.io/react-native/showcase.html
参考
https://facebook.github.io/react-native/docs/getting-started.html
不管是 Web 还是 Mobile, React 都是很棒的。 所以为什么不在你的两个实现之间共享代码?
React Native 并不是为了实现"一次编写,到处运行"的框架。Facebook 一直称之为"一次学习,到处编写"的框架-这就是说你需要为你的平台进行定制。即便这样,你仍然可以在应用程序之间共享大量的逻辑。
在这篇文章我将讨论如何吸取这两种思想的优点,达到一个融合共通的状态。在坚持每个平台定制呈现方式的同时,我们会共享所有应用程序逻辑。
我们会假设你已经具备以下知识: React, React Native 和 Redux。
首先我们需要初始化我们的项目。我们要按照取决于 Facebook 的入门指南 中的步骤 ︰
$ npm install -g react-native-cli$ react-native init ReactNativeWebHelloWorld
现在,我们的目录看起来是这样:
ReactNativeWebHelloWorld|-- android|-- ios|-- node_modules|-- .flowconfig|-- .gitignore|-- .watchmanconfig|-- index.android.js|-- index.ios.js+-- package.json
这包含我们需要为我们的 iOS 和 Android 应用程序的所有文件。现在,我们创建下列目录和文件来配置和运行我们的 Web 应用程序 ︰
ReactNativeWebHelloWorld+-- web |-- public | +-- index.html +-- webpack |-- web.dev.config.js +-- web.prod.config.js
index.html, web.dev.config.js 和 web.prod.config.js 的内容都可以在 GitHub 上找到 - 我们会更晚些时候分析他们 (但如果你现在就想点击他们,那就点吧!)。
当我们改好目录结构后,接着安装依赖项:
$ npm install --save babel babel-polyfill ...$ npm install --save-dev autoprefixer babel-core ...
依赖项的完整列表,请查阅 package.json。
最后,我们为应用程序初始化的所有文件。我们将会做一个相当通用的 React/Redux 应用程序 ︰
ReactNativeWebHelloWorld+-- app |-- actions |-- constants |-- reducers |-- store |-- native | |-- components | |-- containers | +-- style +-- web |-- components |-- containers +-- style
这时候就已经相当清晰了。我们为不同的应用程序有三个不同的入口点 ︰ index.ios.js、 index.android.js 和 app/web/index.js。IOS 和 Android 的入口文件从app/native加载组件和容器, web 入口文件从 app/web 加载组件和容器。这给我们带来我们了:
我不会去分析所有的文件,但要指出一些 Web 和 Native 的关键差异。
让我们看看应用程序入口文件,index.ios.js 看起来是这样:
import React, { Component, AppRegistry } from 'react-native';import Root from './app/native/containers/Root';import configureStore from './app/store/configureStore.prod.js';const store = configureStore();class ReactNativeHelloWorld extends Component { render() { return ( <Root store={store} /> ); }}AppRegistry.registerComponent('ReactNativeWebHelloWorld', () => ReactNativeHelloWorld);
app/web/index.js 是这样:
import React from 'react';import { render } from 'react-dom';import Root from './containers/Root';import configureStore from '../store/configureStore';// load our cssrequire('./styles/style.less');const store = configureStore();const rootElement = document.getElementById;render( <Root store={store} />, rootElement );
所以我们关心的区别是什么?
需要注意的主要事情是顶级组件如何渲染他们自己。在 Native 部分,我们必须在 app registry 中显式定义,而在 web 中我们可以使用 ReactDom,把Root直接渲染在根元素中。
那是什么意思!?
基本上,React Native 和 React Web 在实例化顶级组件上有着不同的方式。
正是这些差异,要求我们坚持每个平台独特的渲染逻辑。
让我们也检查两种情况下HelloWorld组件的render方法。在 Native 中,它看起来是这样:
render() { const { onPress, color } = this.props; const style = StyleSheet.create({ helloWorld: { color: color, textAlign: 'center' } }); return ( <View> <Text onPress={onPress} style={style.helloWorld}>Hello World</Text> </View> );}
Web 中,它看起来是这样:
render() { const { onClick, color } = this.props; return ( <div className="hello-world" onClick={onClick} style={ {color: color} }>Hello World</div> );}
这就又证明了为什么我们需要坚持每个平台独特的渲染逻辑。 React Native 处理
<View>s
和<Text>s
,而 web 处理<div>s
和s
。不仅如此,而且事件系统和样式系统都不一样。
我们也来看看什么他们共享什么...
实例化 HelloWorld 组件时, app/native/containers/App.js 的定义:
<HelloWorld onPress={() => dispatch(toggleColor} color={color}/>
app/web/containers/App.js 的定义:
<HelloWorld onClick={() => dispatch(toggleColor} color={color}/>
这两个dispatch方法都是从react-redux导入的,toggleColor也是从相同的actions文件导入。只的渲染方式不同! 应用程序逻辑是共享的! 这是一个大的飞跃!
相比一个接一个的比较相似性和差异性,我们去看看在package.json中定义的脚本,让你可以生成并运行这个个程序......
在开发和生产环境运行
package.json有 8 定义的脚本:
- start
- ios-bundle
- ios-dev-bundle
- android-bundle
- android-dev-bundle
- web-bundle
- 澳门金莎娱乐网站,web-dev
<b>start</b>
start 是用来打包和运行 native 程序的。当你打开要么 xcode 项目或 android studio 并点击"run"时,它通过start命令启动一个 node 服务器。每次你改了 JavaScript,你不需要重建和重新编译你的应用程序,你只需刷新,这些更改将奇迹般地生效。由于本文不是 React Native 引导,我不会介绍更多信息 - 你可以去 React Native Getting Started 查看。
内置
通过ios-bundle、 ios-dev-bundle、 android-bundle和android-dev-bundle,此脚本生成 JavaScript bundle (是否压缩取决于你是否开启了dev 选项),并将其放置在恰当的地方,以使可以在设备上本地运行。另外,你可以去 React Native Getting Started 查看关于本地运行的更多信息。
web
web-dev 命令在 3001 端口 打开了一个webpack 服务器上,它利用热加载和 redux-time-machine-magic 的特性,以使你可以进行还原和重放你的操作。
web-bundle 命令创建压缩版的 JavaScript bundle,并将其放置在web/public的index.html 中,你可以搭配任何静态文件服务器的使用它。
清除缓存
有时候,当 React Native 工作时,你会确信你已经改变了一些东西,但它仍然会导致你的 App 出问题! 哦不! 我们该怎么办!
npm run clear-cache
Webpack 把 PLATFORM_ENV环境变量设置为了 web 。你可以使用此环境变量有条件地加载不同的文件,取决于你在构建 Web 还是 Native 程序。举个例子 - 你可以基于此抽象出本地存储机制之间的区别。
嗯,首先,这是很有趣的事情。我们有时候会单纯为了精神愉悦做某些事情。但如果这对你来说还不够,找出你的应用程序中的 action/reducer/request 层面的 bug,你可以一次性搞定他们,而不需要为你的 Web 和 Native 程序分别处理。它还能加速你在多平台上的开发速度。经过2天的努力,我就能让我的一个 react/redux 的应用程序功能完整的运行在手机上了。
作者信息 原文作者:Jon Kaufman原文链接: MaxLeap团队_UX成员:Jason Huang中文翻译首发链接:
请转载的亲们,转发时请注意自带作者信息一栏并本自媒体公号:MaxLeap,尊重原创作者及译者的劳动成果~ 谢谢配合~
编辑:编程技术 本文来源:中共享代码
关键词: