中共享代码

时间:2019-10-07 07:34来源:编程技术
本文讲的是一种在 React Web 和 React Native共享应用程序逻辑,但在每个平台保持独立的渲染特性的方法。示例应用程序可以在这里 上找到。 为什么使用react native? 既拥有Native的用户体验、

本文讲的是一种在 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,在重新编译这块,你可以立刻看到看到你修改的效果。使用热重载技术,你甚至可以在运行新的代码,并且保留应用的状态。

    澳门金莎娱乐网站 1

    热重载技术

  • 需要时可以使用原生的代码
    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>
          );
        }
      }
    

澳门金莎娱乐网站 2React 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

    澳门金莎娱乐网站 3

    初始化中的MyFirstRNApp

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

初始化MyFirstRNApp成功
  • react-native run-ios

    澳门金莎娱乐网站 4

    编译中

![](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
    为该项目依赖包的管理文件

澳门金莎娱乐网站 5

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的代码,很简单吧。

澳门金莎娱乐网站 6React Web

浅析react native架构

澳门金莎娱乐网站 7

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.jsindex.android.jsapp/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>ss。不仅如此,而且事件系统和样式系统都不一样。

我们也来看看什么他们共享什么...

实例化 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-bundleios-dev-bundleandroid-bundleandroid-dev-bundle,此脚本生成 JavaScript bundle (是否压缩取决于你是否开启了dev 选项),并将其放置在恰当的地方,以使可以在设备上本地运行。另外,你可以去 React Native Getting Started 查看关于本地运行的更多信息。

web

web-dev 命令在 3001 端口 打开了一个webpack 服务器上,它利用热加载和 redux-time-machine-magic 的特性,以使你可以进行还原和重放你的操作。

web-bundle 命令创建压缩版的 JavaScript bundle,并将其放置在web/publicindex.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,尊重原创作者及译者的劳动成果~ 谢谢配合~

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

关键词: