android 架构之集成react native框架js混编APP

本篇文章主要总结一下现在APP当中使用的js、webView混编架构和技术。

什么是 js 混编？

js混编简单说就是使用JavaScript开发APP程序。

android应用使用的是java，Kotlin 、c/c++ 为主的语言开发，ios使用的object-c 、 swift、c/c++ 为主语言开发，由于市场是基本都是android和ios手机，所以一般公司开发什么项目android和ios的APP都必须开发。android和ios都提供一个库webkit浏览器引擎的支持，android提供了一个组件webView用于显示网页，相当于一个内置浏览器，ios也有类似一个组件UIWebView；webView和UIWebView也都支持js bridge的模式，就是js与java或者object-c进行交互，那么就产生一种开发模式就是hybrid APP开发模式。

hybrid 应用

hybrid APP开发模式由于可以使用HTML5 、css、js进行大量UI开发得到了飞速的发展，到后面这类开发也出现很多优秀的框架例如：cordova(phoneGap) ionic 等，他们基本架构都是使用浏览器组件（webView,UIWebView）渲染UI，使用js调用原生代码执行手机功能。那么随后发展中hybrid应用也暴露很多问题。

hybrid 应用缺点

UI渲染性能差，例如加载白屏，渲染卡顿

内存消耗高，主要是没有优秀的回收复用机制，例如原生recyclerView

用户交互差，用户触摸反应迟钝等

UI渲染失真

那么为了解决hybrid APP中的鸡肋痛点，那么也产生除了很多记得新js 混编开发框架，例如react native(facebook 公司出品), Xamarin(微软公司出品，c#阵营，干的也是跨平台这档子事);这种框架已经不再是hybrid模式，应该叫做js native APP 开发模式。

js native 应用(react native ,Xamarin )

js native 应用克服了很hybrid的缺点，他是通过js开发使用自定义封装UI控件进行开发，最终打包成原生应用。

1、优点

原生级别的UI渲染

没有通过webView来进行桥接，减少内存消耗

用户体验迅速，触摸流畅

提供原生方法调用自定义接口，和自定义UI组件的封装使用，可以无缝对接你现在应用

android和ios端高度UI一致性

其实缺点也是比较明显，例如：

1、缺点

一定的学习成本，相当于学习新的开发技术

项目避免不了封装自定义方法和UI控件，桥接代码多

项目维护成变高了

常用混编框架对比表

项目	cordova（phoneGap）	react native	Xamarin	ionic
是否使用webView交互	是	否	否	是
是否具备自有UI组件	否	是	是	是
开源	是	是	是	是
是否打包成原生	否	是	是	否
具备定制IDE工具	否	是	是	否
开发语言	js	js	c#	js
推荐理由	前身phoneGap，历史悠久	facebook大厂背景，使用react js开发，提供了良好的调用原生api和UI组件机制	强烈推荐，超级大厂微软支持，mono是后台，导出平台不止是android 、iOS，还有windows桌面程序	具备独立js UI，建立在cordova之上

总体而言优点还是跨平台，如果选择js混编框架还是推荐使用react native。

react native整合进入android应用，加入js开发模式

操作步骤：

配置好React Native依赖和项目结构。
创建js文件，编写React Native组件的js代码。
在应用中添加一个RCTRootView。这个RCTRootView正是用来承载你的React Native组件的容器。
启动React Native的Packager服务，运行应用。
验证这部分组件是否正常工作。

开始前我们必须使用react native脚手架搭建出一个可以运行的hello world 项目，本文介绍主要是集成react native框架进入现有应用重点不是环境搭建，所以你可以自行百度react native官网的初始化项目文章。

假设你现在已经有了环境了和一个可以运行hello world 项目了那么我们可以开始接入现有应用了。

hello world 项目项目目录如图：

在这里插入图片描述

复制node_modules目录和package.json进入你android项目跟目录如图：

在这里插入图片描述

创建index.android.js 文件放入android根目录，写入代码：

'use strict';
import React from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    NativeModules,
    ToastAndroid,
    requireNativeComponent,
    DeviceEventEmitte,
    Alert
} from 'react-native';

class HelloWorld extends React.Component {

    constructor(props) {
        super(props);
    }

    componentWillMount() {
    }


    render() {
        return (
            <View style={styles.container}>
                <Text style={{alignItems:'flex-start', backgroundColor:'red', height:49, textAlign:'right'}}>
                    作者jason 李
                </Text>
            </View>
        )
    }

}

var styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        flexDirection: 'column',
    },
    hello: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
});

AppRegistry.registerComponent('HelloWorlds', () => HelloWorld);

接下是android部分了：

在入口gradle文件加入代码：

allprojects {
    repositories {
        google()
        jcenter()
        maven {
            url "$rootDir/node_modules/react-native/android"  //加入这句
        }
    }
}

在项目gradle文件中加入依赖：

compile "com.facebook.react:react-native:0.55.3"

创建Application程序：

public class MyApplication extends Application implements ReactApplication {

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                    new MainReactPackage()
            );
        }

    };
    @Override
    public ReactNativeHost getReactNativeHost() {
        return mReactNativeHost;
    }
}

创建react activity：

public class MyReactActivity extends Activity implements DefaultHardwareBackBtnHandler {
    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        mReactRootView = new ReactRootView(this);
        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setBundleAssetName("index.android.bundle")
                .setJSMainModulePath("index")
                .addPackage(new MainReactPackage())
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();
        // 注意这里的MyReactNativeApp必须对应“index.js”中的
        // “AppRegistry.registerComponent()”的第一个参数
        mReactRootView.startReactApplication(mReactInstanceManager, "HelloWorlds", null);

        setContentView(mReactRootView);
    }

    @Override
    public void invokeDefaultOnBackPressed() {
        super.onBackPressed();
    }
}

加入权限：

<uses-permission android:name="android.permission.INTERNET" />

至此所有的配置结束!!!

运行测试

在目录打开cmd：输入

yarn start

然后用Android studio运行你的项目！！

在这里插入图片描述