原生 Android 集成 React Native


使用 React Native 从零开始开发一款移动应用是一件很惬意的事情,但对于一些已经上线的产品,完全摒弃原有应用的历史沉淀,全面转向 React Native 是不现实的。因此,使用React Native去统一原生Android、iOS应用的技术栈,把它作为已有原生应用的扩展模块,是目前混合开发的最有效方式。

首先,在原生Android项目目录下执行以下命令创建一个package.json文件。

yarn init

然后,根据提示输入对应的配置信息。等待命令执行完成之后,我们会发现Android项目的根目录多了一个package.json文件。

接下来,使用如下命令添加React和React Native运行环境的支持脚本。

yarn add react react-native

执行完命令后,会发现Android项目的根目录下多了一个node_modules文件夹,里面包含了React Native开发也运行所需的依赖模块,原则上这个目录是不能复制、移动和修改的。

接下来,使用文本编辑器打开package.json文件,配置React Native的启动脚本,如下代码。

"scripts": {
    "start": "yarn react-native start",
  },

此时,package.json文件的完整内容如下所示。

{
  "name": "AndroidDemo",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "react": "^17.0.1",
    "react-native": "^0.63.4"
  },
  "scripts": {
    "start": "yarn react-native start"
  }
}

然后,在Android项目的根目录下创建一个index.js文件,该文件是React Native的入口文件,代码如下。

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

class HelloWorld extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                    <Text style={styles.hello}>Hello, React Native</Text>
            </View>
        );
    }
}

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

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

接下来,我们使用Android Studio打开原生Android项目,并在app目录的build.gradle文件的dependencies代码块中添加React Native和JSC引擎依赖,如下所示。

dependencies {
    ...
    implementation "com.facebook.react:react-native:+" 
    implementation "org.webkit:android-jsc:+"
}

如果不指定依赖的版本,那么默认使用的是package.json文件中React Native对应的版本。然后,在项目的build.gradle文件的allprojects代码块中添加React Native和JSC引擎的路径,如下所示。

allprojects {
    repositories {
        maven {
            url "$rootDir/../node_modules/react-native/android"
        }
        maven {
            url("$rootDir/../node_modules/jsc-android/dist")
        }
        ...
    }
    ...
}

然后,打开AndroidManifest.xml清单文件,添加网络权限代码,如下所示。

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

如果需要访问开发者调试菜单,还需要在AndroidManifest.xml清单文件中注册DevSettingsActivity界面,如下所示。

<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />

接下来,新建一个Activity作为React Native的容器页面,并在Activity中创建一个ReactRootView对象,然后在这个对象之中启动React Native应用代码,如下所示。

public class MyReactActivity extends Activity implements DefaultHardwareBackBtnHandler {

    private ReactRootView mReactRootView;
private ReactInstanceManager mReactInstanceManager;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        SoLoader.init(this, false);
        mReactRootView = new ReactRootView(this);
        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setCurrentActivity(this)
                .setBundleAssetName("index.android.bundle")
                .setJSMainModulePath("index")
                .addPackage(new MainReactPackage())
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();
        mReactRootView.startReactApplication(mReactInstanceManager, "MyReactNativeApp", null);
        setContentView(mReactRootView);
    }

    @Override
    public boolean onKeyUp(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
            mReactInstanceManager.showDevOptionsDialog();
            return true;
        }
        return super.onKeyUp(keyCode, event);
    }
}

可以使用Android Studio的【Alt + Enter】快捷键自动导入缺失的语句,并且BuildConfig是编译时自动生成的,无需额外引入。

由于React Native应用调试还需要悬浮窗权限,所以在需要在Android项目的代码中添加悬浮窗权限逻辑,如下所示。

private final int OVERLAY_PERMISSION_REQ_CODE = 1; 

private void requestPermission() {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
            if (!Settings.canDrawOverlays(this)) {
                Intent intent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION,
                        Uri.parse("package:" + getPackageName()));
                startActivityForResult(intent, OVERLAY_PERMISSION_REQ_CODE);
            }
        }
}

@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    if (requestCode == OVERLAY_PERMISSION_REQ_CODE) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
            if (!Settings.canDrawOverlays(this)) {
                // SYSTEM_ALERT_WINDOW permission not granted
            }
        }
    }
    mReactInstanceManager.onActivityResult( this, requestCode, resultCode, data );
}

接下来,我们在AndroidManifest.xml清单文件中注册MyReactActivity,此处我们直接使用MyReactActivity替换MainActivity作为应用的主页面,如下所示。

<activity
      android:name=".MyReactActivity"
      android:theme="@style/Theme.AppCompat.Light.NoActionBar">
<intent-filter>
          <action android:name="android.intent.action.MAIN" />
          <category android:name="android.intent.category.LAUNCHER" />
      </intent-filter>
</activity>

完成上述操作后,我们在src/main目录下创建一个assets资源文件夹,然后执行如下打包命令。

react-native bundle --platform android --entry-file index.js

接着,执行yarn start命令启动React Native服务,重新运行原生Android项目即可看到如下图所示。



https://mp.weixin.qq.com/s/ZHAIq6gKvzQbLrceCNA7gQ

Android动态传感器的介绍及其应用

发布于:11天以前  |  85次阅读  |  详细内容 »

Android 实现小红书登陆页面背景图无限滚动效果

发布于:14天以前  |  109次阅读  |  详细内容 »

关于 Android MVVM 一些理解与实践

发布于:1月以前  |  423次阅读  |  详细内容 »

原生 Android 集成 React Native

发布于:1月以前  |  322次阅读  |  详细内容 »

基于 Jenkins 的 Android 持续集成

发布于:2月以前  |  540次阅读  |  详细内容 »

有赞 Android 编译优化方案 Savitar 2.0

发布于:2月以前  |  686次阅读  |  详细内容 »

闲鱼是如何实践一套完整的埋点自动化验证方案的?

搜索推荐算法的精准和埋点数据的准确性息息相关。一旦埋点数据出现问题,用户侧就会出现推荐商品不准确、过度推荐等问题,同时宏观的交易大盘数据的统计也会有偏差,进而影响整个商品运营策略,因此采取有效的手段来保障埋点质量就成为了闲鱼客户端质量保障的关键的一环。

发布于:3月以前  |  682次阅读  |  详细内容 »

Android 样式系统 | 主题背景覆盖

在 Android 样式系统系列的前几篇文章中,我们探讨了样式和主题背景之间的区别,讨论了使用主题背景和主题背景属性的好处,并重点介绍了一些常用的主题背景属性。 今天,我们聚焦于主题背景的实际使用,如何将它们应用到我们的应用中,以及如何构建主题背景。

发布于:5月以前  |  950次阅读  |  详细内容 »

Android 深色模式适配原理分析

从Android10(API 29)开始,在原有的主题适配的基础上,Google开始提供了Force Dark机制,在系统底层直接对颜色和图片进行转换处理,原生支持深色模式。深色模式可以节省电量、改善弱势及强光敏感用户的可视性,并能在环境亮度较暗的时候保护视力,更是夜间活跃用户的强烈需求。对深色模式的适配有利于提升用户口碑。

发布于:6月以前  |  1504次阅读  |  详细内容 »

百度APP-Android H5首屏优化实践

百度App自2016年上半年尝试Feed流业务形态,至2017年下半年,历经10个版本的迭代,基本完成了产品形态的初步探索。在整个Feed流形态的闭环中,新闻详情页(文中称为落地页)作为重要的组成部分,如果打开页面后,loading时间过长,会严重影响用户体验。因此我们针对落地页这种H5的首屏展现速度进行了长期优化,本文会详细阐述整个优化思路和技术细节

发布于:6月以前  |  1204次阅读  |  详细内容 »

Android 10分区存储介绍及百度APP适配实践

Google于 2019年9月3日发布了Android10 release版本,为了更好的保护用户数据并限制设备冗余文件增加,Android 10版本变更了设备外部存储访问方式,外部存储新特性称为分区存储(Scoped Storage), 分区存储遵循以下三个原则对外部存储文件访问方式重新设计,便于用户更好的管理外部存储文件

发布于:6月以前  |  1371次阅读  |  详细内容 »

深入探究Android应用启动起点

开发者文档中提到,Android应用有三种启动状态,每种状态都会影响应用向用户显示所需的时间:冷启动、温启动或热启动。三种启动状态中,冷启动耗时最久,系统和App有较多初始化的工作。如果启动时间过长,可能会导致用户在应用商店打低分,甚至完全弃用app,所以冷启动速度是各个app非常重要的性能指标之一。

发布于:6月以前  |  1163次阅读  |  详细内容 »

一文搞懂Android JetPack组件原理之Lifecycle、LiveData、ViewModel与源码分析技巧

Lifecycle、LiveData和ViewModel作为AAC架构的核心,常常被用在Android业务架构中。在京东商城Android应用中,为了事件传递等个性化需求,比如ViewModel间通信、ViewModel访问Activity等等,以及为了架构的扩展性,我们封装了BaseLiveData和BaseViewModel等基础组件,也对Activity、Fragement和ViewHolder进行了封装,以JDLifecycleBaseActivity、LifecycleBaseFragment和LifecycleBaseViewHolder等组件强化了View层功能,构建出了各业务线统一规范架构的基石。

发布于:6月以前  |  1468次阅读  |  详细内容 »

Android 记一次解决问题的过程

之前我写过一篇文章,介绍我在GitHub开源的滑动控件 ConsecutiveScroller 是如何实现布局吸顶功能的。有兴趣的朋友可以去看一下:Android滑动布局ConsecutiveScrollerLayout实现布局吸顶功能。

发布于:7月以前  |  1105次阅读  |  详细内容 »

Android内存异常机制(用户空间)_NE

常见的Android稳定性异常,有内核异常和Android层异常。内核异常也就是常说的“kernel panic”,简称KE异常;Android层异常又分为java层crash和Native层crash,简称JE、NE异常。 上篇文章介绍了JE异常的抓取机制和处理方式,本文再讲一下NE异常。

发布于:8月以前  |  1656次阅读  |  详细内容 »

Android-模块化-面向接口编程

随着业务的发展,工程的逐渐增大与开发人员增多,很多工程都走向了模块化、组件化、插件化道路,来方便大家的合作开发与降低业务之间的耦合度。现在就和大家谈谈模块化的交互问题,首先看下模块化的几个优势。

发布于:8月以前  |  2012次阅读  |  详细内容 »

Android 机型适配终极篇

发布于:9月以前  |  1830次阅读  |  详细内容 »

Android 内存缓存 LruCache 原理与实现

okhttp和glide都使用的lru缓存,那什么是lru缓存呢?android 又是如何实现lru缓存 的呢?

发布于:9月以前  |  1873次阅读  |  详细内容 »

ijkPlayer编译支持https的so文件-Android

发布于:9月以前  |  1860次阅读  |  详细内容 »

Android SurfaceView 播放gif

Android SurfaceView 是Android系统中的高级组件,它有自己的绘制界面,可以在一个独立的线程进行UI的绘制, 因此不会阻塞主线程,这也是我们使用SuefaceView播放gif图片的原因。

发布于:9月以前  |  1703次阅读  |  详细内容 »

最多阅读

简化Android的UI开发 1年以前  |  444344次阅读
30分钟搭建一个android的私有Maven仓库 2年以前  |  3320次阅读
Android设计与开发工作流 1年以前  |  3229次阅读
Google Enjarify:可代替dex2jar的dex反编译 2年以前  |  3122次阅读
Android多渠道打包工具:apptools 2年以前  |  2679次阅读
Google Java编程风格规范(中文版) 2年以前  |  2646次阅读
Android UI基本技术点 2年以前  |  2638次阅读
Android Studio 生成so文件 及调用 9月以前  |  2565次阅读
Android权限 - 第一篇 2年以前  |  2520次阅读
Stetho 2年以前  |  2447次阅读
2015 Google IO带来的新 Android 开发工具 2年以前  |  2381次阅读
Android死锁初探 10月以前  |  2376次阅读
听FackBook工程师讲*Custom ViewGroups* 2年以前  |  2293次阅读