react-native连接android原生模块

news2024/11/14 13:44:16

搭建react-native项目

搭建node和jdk的环境

搭建Android的环境

创建React-native项目

运行react-native项目

下载夜神模拟器

使用adb连接夜神浏览器。

运行react-native项目

编写原生安卓的apk

android studio中编写原生代码

在React-native编写代码。

搭建react-native项目
1. 搭建node和jdk的环境
  
  软件 版本号 测试版本命令
  node 20.16.0 node -version
  jdk 21.0.4 javac -version
  java的jdk版本（也就是java的环境），可以在以下网站进行下载。https://www.oracle.com/java/technologies/downloads/#java17
  输入javac -version有结果返回才算成功。
2. 搭建Android的环境
  1. 注意：记得这一步要有稳定的代理软件，不然后面的步骤都走不下去
  2. 安装 android studio。可以通过这个网站进行下载： android studio下载链接安装界面中选择"Custom"选项，确保选中了以下几项：
    
    配置
    Android SDK
    Android SDK Platform
    Android Virtual Device
    如果选择框是灰的，你也可以先跳过，稍后再来安装这些组件。
  3. 安装SDK，Android Studio 默认会安装最新版本的 Android SDK。一些Android Studio的样式是新UI，可以先设置为旧样式。
  4. 开始管理SDK。
    
    在 SDK Manager 中选择"SDK Platforms"选项卡，然后在右下角勾选"Show Package Details"。展开 Android 14 (UpsideDownCake) 选项，确保勾选了下面这些组件（如果你看不到这个界面，则需要使用稳定的代理软件）：
    
    Android SDK Platform 34
    Intel x86 Atom_64 System Image(官方模拟器镜像文件，使用非官方模拟器不需要安装此组件，我使用的是夜神模拟器，所以不用配）
    
    然后点击"SDK Tools"选项卡，同样勾中右下角的"Show Package Details"。展开"Android SDK Build-Tools"选项，确保选中了 React Native 所必须的34.0.0版本。你可以同时安装多个其他版本。
    
    最后点击"Apply"来下载和安装这些组件。
  5. 通过android studio的下载的sdk可以通过下面图的图纸，进行设置位置。
  6. 设置Android_Home的环境变量。我们打开通过android studio生成的sdk的目录。
  7. 加入ANDROID_HOME的配置。设置属性：ANDROID_HOME为D:\environment_software\sdk·
  8. 加入工具目录到path里面去。
    
    %ANDROID_HOME%\platform-tools
    %ANDROID_HOME%\tools\bin
    %ANDROID_HOME%\tools
    %ANDROID_HOME%\emulator
3. 创建React-native项目
  1. 如果你之前全局安装过旧的react-native-cli命令行工具，请使用npm uninstall -g react-native-cli卸载掉它以避免一些冲突：
    
    npm uninstall -g react-native-cli @react-native-community/cli
  2. 使用命令创建react-native项目
    
    npx @react-native-community/cli@latest init AwesomeProject
  3. 下载完是下面这个图：
运行react-native项目
1. 下载夜神模拟器
  1. 下载地址：夜神安卓模拟器-手游模拟器电脑版_夜神模拟器官网
  2. 启动夜神模拟器。
2. 使用adb连接夜神浏览器。
  1. 配置环境变量：有配置这个目录就可以了。
  2. 输入命令： adb connect 127.0.0.1:62001
  3. 执行 npm run android
  4. 会出现以下的错误。（Unable to open connection to ADB server: java.io.IOException: Can't find adb server on port 5037, IPv4 attempt: Connection refused: connect, IPv6 attempt: Connection refused: connect）
  5. 解决方案：
    1. 到SDK的目录下。复制3个文件。下面需要复制到夜神模拟器的目录中去。
    2. 到夜神模拟器的文件夹。可以在菜单下输入“夜神模拟器”，右键打开文件位置。
    3. 覆盖文件。
    4. 然后在sdk目录下，复制一份adb.exe，并重命名为nox_adb.exe。
    5. 也拷贝到夜神模拟器的目录下。
    6. 重新启动夜神，在拷贝文件过程中，也需要先关闭夜神模拟器，不然文件不让覆盖。
3. 运行react-native项目
  1. 在vscode输入 adb connect 127.0.0.1:62001，然后输入 npm run android命令。
  2. 夜神模拟器的界面效果。
  3. 修改代码，查看是否变化。
  4. 可以看到代码确实的变化了。

编写原生安卓的apk

android studio中编写原生代码

我们使用android studio进行编写代码，有一些代码可以进行提示。
使用androiid studio打开rn项目的android文件夹。
使用android studio的file下的open。
点击自动下载依赖。
下载成功后的目录是这样的。
在app下的java的com.facebook.react目录下新建一个 CalendarModule.java 文件。
在上面那个目录右键，点击New，点击Java class。
加入名字 CalendarModule。

加入代码。

package com.your-apps-package-name; // replace your-apps-package-name with your app’s import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import java.util.Map;
import java.util.HashMap;

public class MyAppPackage implements ReactPackage {

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }

    @Override
    public List<NativeModule> createNativeModules(
            ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();

        modules.add(new CalendarModule(reactContext));

        return modules;
    }

}

在com.facebook.react新建一个MyAppPackage.java文件。

MyAppPackage的文件修改成以下内容。

package com.facebook.react;
import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class MyAppPackage implements ReactPackage {

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }

    @Override
    public List<NativeModule> createNativeModules(
            ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();

        modules.add(new CalendarModule(reactContext));

        return modules;
    }

}

要注册CalendarModule包，你必须将MyAppPackage添加到 ReactNativeHost 的getPackages()方法返回的包列表中。打开MainApplication.java或MainApplication.kt文件，位于如下路径:android/app/src/main/java/com/your-app-name/。

找到 ReactNativeHost 的getPackages()方法，并将你的包添加到getPackages()返回的包列表中。如下面图：
在19行加入内容。add(MyAppPackage())

在React-native编写代码。
1. 导入文件
```
import {NativeModules} from 'react-native';
const {CalendarModule} = NativeModules;
```
2. 加入一个按钮，并且触发Modules的方法。
```
import {Button, NativeModules} from 'react-native';
const {CalendarModule} = NativeModules;
function onPress() {
  CalendarModule.createCalendarEvent('testName', 'testLocation');
}

<Button onPress={onPress} title='按钮'></Button>
```
3. 代码截图如下：
4. 重新执行 npm run android。可以看到按钮出现了。
5. 点击没有任何反应。
6. 在android的代码中，我们执行的逻辑是打印日志。
7. 我们需要开启adb的日志，在react-native输入 adb logcat。
8. 查看日志，可以看到输入语句可以输入了。