react-native连接android原生模块

搭建react-native项目

搭建node和jdk的环境

搭建Android的环境

创建React-native项目

运行react-native项目

下载夜神模拟器

使用adb连接夜神浏览器。

运行react-native项目

编写原生安卓的apk

android%20studio%E4%B8%AD%E7%BC%96%E5%86%99%E5%8E%9F%E7%94%9F%E4%BB%A3%E7%A0%81-toc" style="margin-left:40px;">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%20studio%E4%B8%AD%E7%BC%96%E5%86%99%E5%8E%9F%E7%94%9F%E4%BB%A3%E7%A0%81" style="background-color:transparent;">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 {@Overridepublic List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {return Collections.emptyList();}@Overridepublic 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 {@Overridepublic List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {return Collections.emptyList();}@Overridepublic 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. 查看日志，可以看到输入语句可以输入了。