Android项目接入React Native方案

news2024/9/27 5:47:32

        本篇文章主要介绍在现有的Android项目中接入React Native的接入过程，分析接入过程中的一些问题和解决方案，接入RN的平台为Android，开发环境为Mac，开发工具为Android Studio。

一、环境配置

1、Android配置

        因为是现有的Android项目集成RN，所以关于Android方面的SDK，JDK，环境变量配置不做过多的介绍。需要注意的是环境变量的配置：

终端输入：$ open -e ~/.zshrc

export ANDROID_HOME=/Users/username/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
export PATH=$PATH:$ANDROID_HOME/emulator

export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_181.jdk/Contents/Home
export PATH=$JAVA_HOME/bin:$PATH:.
export CLASSPATH=$JAVA_HOME/lib/tools.jar:$JAVA_HOME/lib/dt.jar:.

使环境变量生效：$ source ~/.zshrc

2、React Native配置

（1）安装 Node 和 Watchman

        我们推荐使用Homebrew来安装 Node 和 Watchman。在命令行中执行下列命令安装（如安装较慢可以尝试阿里云的镜像源 https://developer.aliyun.com/mirror/homebrew）：

$ brew install node
$ brew install watchman

# 使用nrm工具切换淘宝源
$ npx nrm use taobao

如果之后需要切换回官方源可使用
$ npx nrm use npm

（2）安装Yarn

        Yarn是 Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载。

$ npm install -g yarn

        安装完 yarn 之后就可以用 yarn 代替 npm 了，例如用yarn代替npm install命令，用yarn add 某第三方库名代替npm install 某第三方库名。

二、目录配置

1、项目结构

        首先需了解RN项目的目录结构，不能在现在的Android项目中创建RN相关文件和模块，否则会导致react-native link失败，出现各种奇怪的问题，报错如下：

React Native CLI failed to determine Android project configuration.

2、项目初始化配置

        首先创建一个空目录用于存放 React Native 项目，然后在其中创建一个/android子目录，把你现有的 Android 项目拷贝到/android子目录中。在项目根目录下创建一个名为package.json的空文本文件，然后填入以下内容：

{
  "name": "MyReactNativeApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "react-native run-android"
  }
}

        name和version对于现有的Android项目没有实际意义，除非把他发布到仓库中。

        scripts用于安装项目到手机并且启动服务。

3、安装React和React Native模块

        打开一个终端/命令提示行，进入到项目目录中（即包含有 package.json 文件的目录），注意一定要切换到该目录中，然后运行下列命令来安装：

$ yarn add react-native

        安装完成之后终端会出现一条警告：

warning " > react-native@0.63.3" has unmet peer dependency "react@16.13.1".

        这是正常现象，意味着我们还需要安装指定版本的 React：

$ yarn add react@16.13.1

        这样安装就完成，安装完成后再次打开package.json，就会发现该模块已经添加依赖了，如下图：

三、Android项目配置

        把新建的RN项目的目录中的Android项目使用打开Android Studio打开，在编辑器上面完成以下操作：

1、gradle配置

（1）在你的 app 中 build.gradle 文件中添加 React Native 和 JSC 引擎依赖:

dependencies {

    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation 'androidx.appcompat:appcompat:1.2.0'
    ...
    implementation "com.facebook.react:react-native:+" // From node_modules
    implementation "org.webkit:android-jsc:+"
}

        注意，以上两个都必须添加，缺一不可。

（2）在项目的build.gradle文件中为React Native和JSC 引擎添加maven

allprojects {
    repositories {
        google()
        jcenter()
        maven {
            // All of React Native (JS, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
        maven {
            // Android JSC is installed from npm
            url("$rootDir/../node_modules/jsc-android/dist")
        }
    }
}

        运行Android Studio的gradle右上角上面的【Sync Now】,如何能够正常编译，则说明路径配置正常，否则路径有误。

2、AndroidManifest.xml配置

(1)manifest节点下：

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

        设置网络请求权限和RN屏幕显示日志权限。

(2)application节点下：

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

        如果需要访问开发者菜单，则需要声明，开发者菜单一般仅用于在开发时从Packager服务器刷新JavaScript代码，所以在正式发布时可以去掉这一权限。

(3)application节点内：

android:networkSecurityConfig="@xml/network_security_config"

app/src/res/xml/network_security_config.xml:

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
  <!-- allow cleartext traffic for React Native packager ips in debug -->
  <domain-config cleartextTrafficPermitted="true">
    <domain includeSubdomains="false">localhost</domain>
    <domain includeSubdomains="false">10.0.2.2</domain>
    <domain includeSubdomains="false">10.0.3.2</domain>
  </domain-config>
</network-security-config>

        适配Android9.0明文http访问限制。

四、代码集成

1、index.js创建

        index.js是 React Native应用在Android上的入口文件。而且它是不可或缺的！它可以是个很简单的文件，简单到可以只包含一行require/import导入语句。在RN项目的根据目录创建index.js（和package.json）同级目录。

2、添加测试的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, World</Text>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center'
  },
  hello: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10
  }
});

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

3、配置Activity

        配置一个基类的Activity，初始化一些参数，让需要用React Native开发的页面继承基类，参数含义看备注。


public class BaseActivity extends AppCompatActivity implements DefaultHardwareBackBtnHandler {

    private final int OVERLAY_PERMISSION_REQ_CODE = 1;  // 任写一个值
    protected ReactInstanceManager mReactInstanceManager;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setCurrentActivity(this)
                .setBundleAssetName("index.android.bundle")
                .setJSMainModulePath("index")
                .addPackage(new MainReactPackage())
                //注意BuildConfig应该是在你自己的包中自动生成，无需额外引入。千万不要从com.facebook...的包中引入！
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();
        // 配置权限以便开发中的红屏错误能正确显示，用于程序调试中
        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) {
        super.onActivityResult(requestCode, resultCode, 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);
    }

    /**
     * 把生命周期回传给 React Native
     */
    @Override
    protected void onPause() {
        super.onPause();

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostPause(this);
        }
    }

    @Override
    protected void onResume() {
        super.onResume();
        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostResume(this, this);
        }
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostDestroy(this);
        }
    }

    /**
     * 把后退按钮事件传递给 React Native
     */
    @Override
    public void onBackPressed() {
        if (mReactInstanceManager != null) {
            mReactInstanceManager.onBackPressed();
        } else {
            super.onBackPressed();
        }
    }

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

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

4、编写React Native页面

public class MyReactActivity extends BaseActivity {

    private ReactRootView mReactRootView;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mReactRootView = new ReactRootView(this);
        // 注意这里的MyReactNativeApp必须对应“index.js”中的
        // “AppRegistry.registerComponent()”的第一个参数
        mReactRootView.startReactApplication(mReactInstanceManager, "MyReactNativeApp", null);
        setContentView(mReactRootView);
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        if (mReactRootView != null) {
            mReactRootView.unmountReactApplication();
        }
    }
}

        在AndroidManifest.xml注册MyReactActivity：

<activity
    android:name=".MyReactActivity"
    android:label="@string/app_name"
    android:theme="@style/Theme.AppCompat.Light.NoActionBar">
</activity>

        需要把MyReactActivity的主题设定为Theme.AppCompat.Light.NoActionBar，因为里面有许多组件都使用了这一主题。

5、在MainActivity启动该RN页面


public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        findViewById(R.id.btn).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                MainActivity.this.startActivity(new Intent(MainActivity.this, MyReactActivity.class));
            }
        });
    }
}

        代码就集成完毕，结构图如下：

五、项目运行 

1、命令行运行

        使用USB连接电脑，通过adb devices命令查看设备如果有设备列表，则已经连接到设备，打开终端，切换到项目根目录执行命令：

$ yarn start

或者

$ react-native run-android

        出现如图所示内容，Android project not found. Are you sure this is a React Native project?，这块的问题还是项目结构的问题，对比下刚刚开始的项目结构和上一步咱们自己项目结构： 

        发现缺少android目录，这块的android目录就使咱们上面的Demo目录，修改Demo为android目录，重新执行yarn start，这时候会出现两个终端界面，如下：

         根据右边界面提示，点击键盘R，会看到屏幕的RN页面会刷新，点击键盘D会出现如下：

         点击Reload也会重新加载，效果类似与终端上输入R一样。如果出现以下状态，则是Server未连接成功：

        解决方案： 

    （1）通过adb devices命令查看设备是否连接成功，如果成功；
    （2）重新执行yarn start，重新安装。

2、Android Studio + 命令行运行

        除了上面的运行方式外，还可以在Android Studio上面运行，在Android Studio上面Run app运行之后，在RN项目的根目录终端中输入：

$ react-native start

        即可开启服务，操作和上面第一种方式类似。

3、Android Studio中运行

        打开android目录中的Android项目，面板最底部找到Terminal控制台，直接输入：

$ yarn start

        效果和第一种方式一样。

六、项目打包

        在BaseActivity中添加了.addPackage(new MainReactPackage())，除此之外系统还提供了了个.addPackages(packages)方法，参数为：

List<ReactPackage> packages = new PackageList(getApplication()).getPackages();

        直接使用会找不到PackageList类，是因为没有link，在React Native 0.60 加入了一个autolinking特性，不需要额外调用react-native link命令。修改android的setting.gradle,bulid.gradle就可以自动完成link。

        setting.gradle添加：

apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle")
applyNativeModulesSettingsGradle(settings)

app/build.gradle添加：

apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle")
applyNativeModulesAppBuildGradle(project)

        这样重新clear项目，ReBuild Progect项目，就可以正常编译通过。关于autolink的详细原理，请参考：https://www.jianshu.com/p/9641b3beae84

        其他参考资料：https://reactnative.cn/

        这些东西整理了很久了今天才发现，顺便记录下。今天是腊月27日，明天回老家了，最后祝大家2023年新年快乐！！！😋😋😋

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/170417.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Vue实现DOM元素拖放互换位置

Vue实现DOM元素拖放互换位置

一、拖放和释放HTML 拖放接口使得 web 应用能够在网页中拖放文件。这里将介绍了 web 应用如何接受从底层平台的文件管理器拖动DOM的操作。拖放的主要步骤是为 drop 事件定义一个释放区(释放文件的目标元素) 和为dragover事件定义一个事件处理程序。触发 drop 事件的目标元素需要…
阅读更多...
day20IO流

day20IO流

1.字符流 1.1为什么会出现字符流【理解】 字符流的介绍 由于字节流操作中文不是特别的方便&#xff0c;所以Java就提供字符流 字符流 字节流 编码表 中文的字节存储方式 用字节流复制文本文件时&#xff0c;文本文件也会有中文&#xff0c;但是没有问题&#xff0c;原因是最…
阅读更多...
数学建模-分类模型（SPSS）

数学建模-分类模型（SPSS）

目录 1.简介 2.样例-二元 1.对于预测结果不理想&#xff0c;在logistics模型里加入平方项交互项等。 2.如果自变量有分类变量&#xff08;如男女&#xff0c;行业有互联网行业、旅游行业……&#xff09; 3.分训练集、测试集 4.fisher线性判别分析 3.样例-多元 注意&…
阅读更多...
【Nginx】使用Docker完成Nginx反向代理

【Nginx】使用Docker完成Nginx反向代理

本机是在CentOS7上面进行操作的 1.首先安装好Dokcer&#xff0c;这里不再赘述 2.Docker安装Nginx容器 2.1首先需要创建Nginx配置文件&#xff0c;之后完成挂载 启动前需要先创建Nginx外部挂载的配置文件&#xff08; /home/nginx/conf/nginx.conf&#xff09; 之所以要先创建…
阅读更多...
Redis - Redis 6.0 新特性之客户端缓存

Redis - Redis 6.0 新特性之客户端缓存

1. 为什么需要客户端缓存 antirez 写了一篇有关客户端缓存设计的想法&#xff1a;《Client side caching in Redis 6》。antirez 认为&#xff0c;Redis 接下来的一个重点是配合客户端&#xff0c;因为客户端缓存显而易见的可以减轻 Redis 的压力&#xff0c;速度也快很多。实…
阅读更多...
Android从开机到APP启动流程——基于Android9.0

Android从开机到APP启动流程——基于Android9.0

Android从开机到APP启动流程——基于Android9.0 一、 Zygote进程启动流程 二、 System Server启动流程 三、 ActivityManagerService启动流程 四、 Launcher App (Home Activity)启动流程 五、 Zygote fork()子进程&#xff0c;子进程入口为ActivityThread.main() 六、 Acti…
阅读更多...
第02讲：使用kubeadm搭建k8s集群的准备工作

第02讲：使用kubeadm搭建k8s集群的准备工作

官方地址:https://kubernetes.io/docs/reference/setup-tools/kubeadm/kubeadm/ kubeadm 是官方社区推出的一个用于快速部署 kubernetes 集群的工具&#xff0c;这个工具能通过两条指令完成一个 kubernetes 集群的部署: 第1步、创建一个 Master 节点 kubeadm init第2步&#x…
阅读更多...
记录一次mysql慢查询的优化过程

记录一次mysql慢查询的优化过程

前言 业务上线后经常报查询超时&#xff0c;数据库使用的是阿里云的RDS&#xff0c;mysql版本是5.6.16-log&#xff0c;有几条统计数据的查询语句执行很慢&#xff0c;有的甚至执行一次需要10多秒&#xff0c;简直无法忍受。 查看了超时时间&#xff0c;默认为0 show variables…
阅读更多...
【微信小程序-原生开发】实用教程03-自定义底部导航（含自定义tabBar导航高亮需点击两次的解决方案）

【微信小程序-原生开发】实用教程03-自定义底部导航（含自定义tabBar导航高亮需点击两次的解决方案）

开始前&#xff0c;请先完成底部导航的开发&#xff0c;详见 【微信小程序-原生开发】实用教程02-添加全局页面配置、页面、底部导航 https://sunshinehu.blog.csdn.net/article/details/128705866 显然&#xff0c;纯文字的底部导航有点low&#xff0c;还是需要有图标的才酷…
阅读更多...
新手编写IntelliJ IDEA插件

新手编写IntelliJ IDEA插件

需求目的可能你会想什么场景会需要用到插件开发&#xff0c;其实插件开发算是一种通用的解决方案&#xff0c;由服务平台定义标准让各自使用方进行自需的扩展。这就像我们非常常用的 P3C 代码检查插件、代码审计插件、脚手架工程创建插件、自动化API提取插件、单元测试统计插件…
阅读更多...
TOF相机国产、非国产统计参数对比分析

TOF相机国产、非国产统计参数对比分析

TOF相机国产、非国产统计参数对比分析 Kinect v2 Kinect v2是Microsoft在2014年发售的&#xff0c;如图1-1所示。相比于Kinect v1在硬件和软件上作出了很大的进化&#xff0c;且在深度测量的系统和非系统误差方面表现出更好的性能。 Kinect v2中一共有三个摄像头&#xff0c…
阅读更多...
Linux学习笔记【part2】网络配置与远程登录

Linux学习笔记【part2】网络配置与远程登录

Linux基础篇学习笔记 1.网络连接模式 VMware 提供了三种网络连接模式&#xff1a; ① 桥接模式 桥接模式&#xff1a;虚拟机直接连接外部物理网络的模式&#xff0c;主机起到了网桥的作用。在这种模式下&#xff0c;虚拟机可以直接访问外部网络&#xff0c;并且对外部网络是…
阅读更多...
vue3利用keepAlive缓存页面

vue3利用keepAlive缓存页面

场景介绍 项目中经常会有这么一个需求&#xff0c;一个表单页面&#xff0c;可能需要跳转其他页面拿到对应的数据&#xff0c;再跳回表单页面&#xff0c;但是之前填写过的数据还在。而某些页面跳这个表单页面的时候&#xff0c;是不需要缓存&#xff0c;因为他是新增&#xf…
阅读更多...
通过Facebook建立反链：SEO角度

通过Facebook建立反链：SEO角度

最近我有一个朋友的网站做得很不错&#xff0c;每天都在增加反链。反链对于网站来说&#xff0c;好处是显而易见的&#xff0c;能够提升搜索引擎对网站的认可度&#xff0c;增强用户对网站的信任度。另外一个方面的好处是&#xff0c;反链可以提高流量&#xff08;或者转化率&a…
阅读更多...
想考个PMP证书，要怎么报考？

想考个PMP证书，要怎么报考？

pmp 报考条件没他们说的那么难&#xff0c;什么 4500/7500 个小时的项目管理经验&#xff0c;这个条件看起来很难&#xff0c;其实项目无处不在&#xff0c;画一幅画&#xff0c;做一餐饭&#xff0c;都能算一个项目&#xff0c;这 4500个小时、7500 个小时很快就达到了。一、报…
阅读更多...
三十、Kubernetes中kube-proxy三种工作模式详解

三十、Kubernetes中kube-proxy三种工作模式详解

1、概述 在kubernetes中&#xff0c;pod是应用程序的载体&#xff0c;我们可以通过pod的ip来访问应用程序&#xff0c;但是pod的ip地址不是固定的&#xff0c;这也就意味着不方便直接采用pod的ip对服务进行访问。 为了解决这个问题&#xff0c;kubernetes提供了Service资源&…
阅读更多...
2023-01-18 ClickHouse之聚合功能源码分析

2023-01-18 ClickHouse之聚合功能源码分析

前言 聚合分析是从海量数据中提取数据的基本方法&#xff0c;对于OLAP数据库而言&#xff0c;聚合分析是其关键能力之一&#xff0c;ClickHouse在这方面也做了很多设计和优化&#xff0c;正如ClickHouse在文档中所述&#xff1a; 本文将分析展示ClickHouse的聚合功能的工作原理…
阅读更多...
NFS 导出的共享信息披露漏洞问题解法

NFS 导出的共享信息披露漏洞问题解法

输入&#xff1a;shoumount -e&#xff0c; 如果有目录信息&#xff0c;则说明有NFS 导出的共享信息披露漏洞。 如果处理了就应显示如下图&#xff1a; 解法如下&#xff1a; 1&#xff09;备份需要修改的文件 cp /etc/hosts.allow /etc/hosts.allowbak cp /etc/hosts.deny…
阅读更多...
前端js实现文件多次添加累加上传和选择删除（django+js）

前端js实现文件多次添加累加上传和选择删除（django+js）

前言 原本的多文件上传功能在选择文件时&#xff0c;只能通过同一范围的鼠标框选或者ctrl/shift多选取选择文件&#xff0c;这样选择文件很不灵活&#xff0c;而且在确定之后如果漏选了文件&#xff0c;再次点击上传按钮时会清空表单里的文件信息&#xff0c;只能重复之前的操…
阅读更多...
springcloudalibaba整合nacos

springcloudalibaba整合nacos

文章目录1.版本配置2.搭建项目2.1idea新建项目2.2项目依赖2.3测试初始项目2.4项目的配置文件3.nocas的配置文件4.进行测试4.1准备测试的文件4.2测试nacos安装&#xff1a; nacos下载安装 1.版本配置 2.搭建项目 2.1idea新建项目 选择springcloudalibaba和springboot版本 spr…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023