react-native毗连android原生模块 - ToB企服应用市场:ToB评测及商务社交产业平台

搭建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。
- 加入代码。
  1. package com.your-apps-package-name; // replace your-apps-package-name with your app’s import com.facebook.react.bridge.NativeModule;
  2. import com.facebook.react.bridge.ReactApplicationContext;
  3. import com.facebook.react.bridge.ReactContext;
  4. import com.facebook.react.bridge.ReactContextBaseJavaModule;
  5. import com.facebook.react.bridge.ReactMethod;
  6. import java.util.Map;
  7. import java.util.HashMap;
  9. public class MyAppPackage implements ReactPackage {
  11. @Override
  12. public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
  13. return Collections.emptyList();
  14. }
  16. @Override
  17. public List<NativeModule> createNativeModules(
  18. ReactApplicationContext reactContext) {
  19. List<NativeModule> modules = new ArrayList<>();
  21. modules.add(new CalendarModule(reactContext));
  23. return modules;
  24. }
  26. }
  复制代码
- 在com.facebook.react新建一个MyAppPackage.java文件。
- MyAppPackage的文件修改成以下内容。
  1. package com.facebook.react;
  2. import com.facebook.react.ReactPackage;
  3. import com.facebook.react.bridge.NativeModule;
  4. import com.facebook.react.bridge.ReactApplicationContext;
  5. import com.facebook.react.uimanager.ViewManager;
  7. import java.util.ArrayList;
  8. import java.util.Collections;
  9. import java.util.List;
  11. public class MyAppPackage implements ReactPackage {
  13. @Override
  14. public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
  15. return Collections.emptyList();
  16. }
  18. @Override
  19. public List<NativeModule> createNativeModules(
  20. ReactApplicationContext reactContext) {
  21. List<NativeModule> modules = new ArrayList<>();
  23. modules.add(new CalendarModule(reactContext));
  25. return modules;
  26. }
  28. }
  复制代码
- 要注册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';
  2. const {CalendarModule} = NativeModules;
  复制代码
- 加入一个按钮，而且触发Modules的方法。
  1. import {Button, NativeModules} from 'react-native';
  2. const {CalendarModule} = NativeModules;
  3. function onPress() {
  4. CalendarModule.createCalendarEvent('testName', 'testLocation');
  5. }
  7. <Button onPress={onPress} title='按钮'></Button>
  复制代码
- 代码截图如下：
- 重新实行 npm run android。可以看到按钮出现了。
- 点击没有任何反应。
- 在android的代码中，我们实行的逻辑是打印日志。
- 我们需要开启adb的日志，在react-native输入 adb logcat。
- 查看日志，可以看到输入语句可以输入了。

软件	版本号	测试版本下令
node	20.16.0	node -version
jdk	21.0.4	javac -version