中共享代码

本文讲的是一种在 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

![](https://upload-images.jianshu.io/upload_images/2817377-da05d7706120477d.png)

初始化MyFirstRNApp成功

• react-native run-ios

  

  编译中

![](https://upload-images.jianshu.io/upload_images/2817377-fc480dcafbb3d512.png)

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



![](https://upload-images.jianshu.io/upload_images/2817377-e185f4f70244e69f.png)

第一个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 定义的脚本:

1. start
2. ios-bundle
3. ios-dev-bundle
4. android-bundle
5. android-dev-bundle
6. web-bundle
7. 澳门金莎娱乐网站，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，尊重原创作者及译者的劳动成果~ 谢谢配合~

编辑：编程技术 本文来源：中共享代码

关键词：