react-native毗连android原生模块

王柳 · 2024-12-7 09:04:33

目录
搭建react-native项目
搭建node和jdk的情况
搭建Android的情况
创建React-native项目
运行react-native项目
下载夜神模拟器
使用adb毗连夜神浏览器。
运行react-native项目
编写原生安卓的apk
android studio中编写原生代码
在React-native编写代码。

搭建react-native项目
- 搭建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有效果返回才算成功。
- 搭建Android的情况
  - 注意：记得这一步要有稳固的代理软件，否则后面的步骤都走不下去
  - 安装 android studio。可以通过这个网站进行下载： android studio下载链接安装界面中选择"Custom"选项，确保选中了以下几项：
    
    配置
    Android SDK
    Android SDK Platform
    Android Virtual Device
    如果选择框是灰的，你也可以先跳过，稍后再来安装这些组件。
  - 安装SDK，Android Studio 默认会安装最新版本的 Android SDK。一些Android Studio的样式是新UI，可以先设置为旧样式。
  - 开始管理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"来下载和安装这些组件。
  - 通过android studio的下载的sdk可以通过下面图的图纸，进行设置位置。
  - 设置Android_Home的情况变量。我们打开通过android studio天生的sdk的目录。
  - 加入ANDROID_HOME的配置。设置属性：ANDROID_HOME为D:\environment_software\sdk·
  - 加入工具目录到path里面去。
    
    %ANDROID_HOME%\platform-tools
    %ANDROID_HOME%\tools\bin
    %ANDROID_HOME%\tools
    %ANDROID_HOME%\emulator
- 创建React-native项目
  - 如果你之前全局安装过旧的react-native-cli下令行工具，请使用npm uninstall -g react-native-cli卸载掉它以避免一些冲突：
    
    npm uninstall -g react-native-cli @react-native-community/cli
  - 使用下令创建react-native项目
    
    npx @react-native-community/cli@latest init AwesomeProject
  - 下载完是下面这个图：
运行react-native项目
- 下载夜神模拟器
  - 下载所在：夜神安卓模拟器-手游模拟器电脑版_夜神模拟器官网
  - 启动夜神模拟器。
- 使用adb毗连夜神浏览器。
  - 配置情况变量：有配置这个目录就可以了。
  - 输入下令： adb connect 127.0.0.1:62001
  - 实行 npm run android
  - 会出现以下的错误。（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）
  - 解决方案：
    - 到SDK的目录下。复制3个文件。下面需要复制到夜神模拟器的目录中去。
    - 到夜神模拟器的文件夹。可以在菜单下输入“夜神模拟器”，右键打开文件位置。
    - 覆盖文件。
    - 然后在sdk目录下，复制一份adb.exe，并重定名为nox_adb.exe。
    - 也拷贝到夜神模拟器的目录下。
    - 重新启动夜神，在拷贝文件过程中，也需要先关闭夜神模拟器，否则文件不让覆盖。
- 运行react-native项目
  - 在vscode输入 adb connect 127.0.0.1:62001，然后输入 npm run android下令。
  - 夜神模拟器的界面效果。
  - 修改代码，查看是否变化。
  - 可以看到代码确实的变化了。
编写原生安卓的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编写代码。
  - 导入文件
    import {NativeModules} from 'react-native';
    const {CalendarModule} = NativeModules;
    复制代码
  - 加入一个按钮，而且触发Modules的方法。
    import {Button, NativeModules} from 'react-native';
    const {CalendarModule} = NativeModules;
    function onPress() {
    CalendarModule.createCalendarEvent('testName', 'testLocation');
    }
    <Button onPress={onPress} title='按钮'></Button>
    复制代码
  - 代码截图如下：
  - 重新实行 npm run android。可以看到按钮出现了。
  - 点击没有任何反应。
  - 在android的代码中，我们实行的逻辑是打印日志。
  - 我们需要开启adb的日志，在react-native输入 adb logcat。
  - 查看日志，可以看到输入语句可以输入了。