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

  • Z时代
  • 2024-01-10
  • 分类：综合

react

本篇文章主要总结一下现在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(微软公司出品);这种框架已经不再是hybrid模式，应该叫做js native APP 开发模式。

js native 应用(react native ,Xamarin )

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

1、优点

  • 原生级别的UI渲染

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

  • 用户体验迅速，触摸流畅

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

  • android和ios端高度UI一致性

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

1、缺点

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

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

  • 项目维护成变高了

总体而言优点还是跨平台，相对选择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(),
                    new MyPackage()
            );
        }
    };
    @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运行你的项目！！

以上是 android 架构之集成react native框架js混编APP 的全部内容， 来源链接： utcz.com/z/382208.html

回到顶部