iosReact-Native前端技术汇总

ReactNative的理解与思考,三端同一套代码的实践

2017-07-04  本文已影响4321人  魔力老钱

1.React Native是什么？

官方说法是这样的

React Native 是一个JavaScript 的框架，用来撰写实时的、可原生呈现iOS 和Android 的应用。 其是基于React的，而React 是Facebook 的用于构建用户界面的JavaScript 库

我自己的看法是这样的

其实这东西从Native开发来说，相当于重新发明了一个浏览器渲染引擎并且套一个React的壳，从Web开发角度来说，就是把原来React的web组件成了原生组件来实现

2.哪些人在用

上面是官方贴出的一些截图

目前我知道的一些项目:

1.蚂蚁金服
蚂蚁金服有一套开源的react组件,支持web还有rn端,这是一个可以参考的三端统一方案

2.京东
京东JDReact,也实现了三端统一的方案,这篇文章,就京东现有架构做了一些解读

3.React Native的优势和劣势

3.1React Native的优势：

(1)它最大的特点就是完全用JavaScript进行应用的开发，但是最终会渲染成原生的组件。对开发者来说，这意味着你拥有了Web开发的效率，同时兼顾了原生的性能

(2)相对Hybird app或者Webapp：

(3)相对于Native app：

(4)最后，社区活跃。除了Facebook之外，GitHub上有很多第三方的团队、个人、公司开发贡献了很多非常优秀的第三方组件，它的社区是非常健康、非常活跃的。

3.2劣势：

4 React native 常用组件和api

基础组件

用户交互组件

列表组件

ios特定组件和api

android特定组件和api

其他功能组件和api


上面都是一些ReactNative官方提供的组件和API,
虽然官方有说一套代码代码实现andriod和ios平台的通用,
不过我们有时候还是需要在特定的场景做一些平台判断,
显示对应平台的代码,

如:

if(Platform.OS === 'android') {
   //安卓平台组件
}else if(Platform.OS === 'ios') {
  //ios平台组件
}

提供一些目前开源的扩展组件:

5.三端同一套代码实现的思考

facebook官方的说法是react-native是为多平台提供共同的开发方式，而不是说一份代码，多处使用

但是在正常的项目中,我们还是希望一套代码能够在ios,android,web端都可以通用的,这样可以保留我们h5的优势,大大提升开发效率

业界目前已经有一些比较成熟的案例的,
比如
1.蚂蚁金服
蚂蚁金服有一套开源的react组件,支持web还有rn端,这是一个可以参考的三端统一方案
2.京东
京东这边也实现了一套三端统一的技术方案,不过目前没有可以参考的代码

这篇文章也提过
其实在业内三端融合也有广泛的研究，方案主要有三种。

目前我这边就第三种方案自己做了一个案例,中间运用到到淘宝团队做的一个开源库
react-web

实现效果如下:

附上一些实现代码:

web文件夹里面就一个页面,还有webpack配置文件去打包

ios入口文件

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Platform
} from 'react-native';

export default class reactnative extends Component {
  render() {
    return (
      <View style={styles.container}>
        <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('reactnative', () => reactnative);
if(Platform.OS == 'web'){
  var app = document.createElement('div');
  document.body.appendChild(app);
  AppRegistry.runApplication('reactnative', {
    rootTag: app
  })
}

重点在这一段:

if(Platform.OS == 'web'){
  var app = document.createElement('div');
  document.body.appendChild(app);
  AppRegistry.runApplication('reactnative', {
    rootTag: app
  })
}

实现思路就是在平台为web的时候,如果引入Text组件,webpack将会
生成一个Text.web.js组件,web端的时候将会引用Text.web.js 去实现
Text组件的效果,同时会把css子集编译为web元素的行内样式.

总结:当然这样的方案还是会有一定的局限性

案例源码我已经放到github上面

源码地址

上面的只是一个案例,如果后续想要真正的实现三端统一的功能,
还是需要自己去实现一套转换方案,这样组件就可以进行扩展.
实现思路可以借鉴淘宝的react-web

这边还有一个比较好的转换实现方案:
react-native-web
作者目前也在持续更新,目前关注已经有5000+

6.React Native的学习资源和开源app项目

1.学习资源

2.开源app:

ReactNativeRubyChina https://github.com/henter/ReactNativeRubyChina

注:加粗的项目,可以重点关注一下

总结:

这些知识我自己的一些思考与理解,如果你有自己的想法还有理解,欢迎留言一起讨论

上一篇 下一篇

猜你喜欢

热点阅读