react-native连接android原生模块

news/2024/11/13 14:28:27/

目录

搭建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编写代码。

  1. 搭建react-native项目

    1. 搭建node和jdk的环境

      软件版本号测试版本命令
      node20.16.0node -version
      jdk21.0.4javac -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. 下载完是下面这个图：

  2. 运行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. 可以看到代码确实的变化了。

  3. 编写原生安卓的apk

    1. 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中编写原生代码

      1. 我们使用android studio进行编写代码，有一些代码可以进行提示。

      2. 使用androiid studio打开rn项目的android文件夹。

      3. 使用android studio的file下的open。

      4. 点击自动下载依赖。
      5. 下载成功后的目录是这样的。
      6. 在app下的java的com.facebook.react目录下新建一个 CalendarModule.java 文件。
      7. 在上面那个目录右键，点击New，点击Java class。
      8. 加入名字 CalendarModule。
      9. 加入代码。 
        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;}}
      10. 在com.facebook.react新建一个MyAppPackage.java文件。
      11. 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;}}

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

        找到 ReactNativeHost 的getPackages()方法，并将你的包添加到getPackages()返回的包列表中。如下面图：

      13. 在19行加入内容。add(MyAppPackage())

    2. 在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. 查看日志，可以看到输入语句可以输入了。


http://www.ppmy.cn/news/1528230.html

相关文章

无人机飞行时状态详解！！！

无人机飞行时状态详解！！！

飞行姿态 无人机的飞行姿态主要涉及其在空中的空间位置和方向&#xff0c;通过控制横滚、俯仰和偏航来实现。 横滚&#xff1a;无人机绕其前后轴&#xff08;通常是X轴&#xff09;的旋转运动&#xff0c;表现为左右倾斜。当无人机的左翼低于右翼或右翼低于左翼时&#xff0c…
阅读更多...
docker挂载宿主机文件run命令启动报错

docker挂载宿主机文件run命令启动报错

背景 使用docker安装mysql8，docker run 命令提示报错 命令： docker run -d \ -p 3306:3306 \ -v ~/docker/mysql8/log/mysqld.log:/var/log/mysqld.log \ -e MYSQL_ROOT_PASSWORD=123456 \ --name mysql8 mysql:8.0.36 报错信息 docker: Error response from daemon: fai…
阅读更多...
Spring Boot校园管理系统：技术选型与架构设计

Spring Boot校园管理系统：技术选型与架构设计

第2章相关技术 2.1 B/S架构 B/S结构的特点也非常多&#xff0c;例如在很多浏览器中都可以做出信号请求。并且可以适当的减轻用户的工作量&#xff0c;通过对客户端安装或者是配置少量的运行软件就能够逐步减少用户的工作量&#xff0c;这些功能的操作主要是由服务器来进行控制的…
阅读更多...
网站后缀名学习

网站后缀名学习

目的 学习并记录一些常见的网站后缀名 常见网站后缀名 1、com commercial翻译为商业的。 最常见的域名后缀&#xff0c;全世界范围使用最多的域名&#xff0c;原用于商业组织&#xff0c;现在个人也能注册。 2、net network翻译为网络&#xff0c;更多是专业技术类的网址…
阅读更多...
camtasia2024绿色免费安装包win+mac下载含2024最新激活密钥

camtasia2024绿色免费安装包win+mac下载含2024最新激活密钥

Hey, hey, hey&#xff01;亲爱的各位小伙伴&#xff0c;今天我要给大家带来的是Camtasia2024中文版本&#xff0c;这款软件简直是视频制作爱好者的福音啊&#xff01; camtasia2024绿色免费安装包winmac下载&#xff0c;点击链接即可保存。 先说说这个版本新加的功能吧&#…
阅读更多...
SQL 查询语句汇总

SQL 查询语句汇总

在软件开发和数据分析中&#xff0c;SQL&#xff08;结构化查询语言&#xff09;是与数据库交互的重要工具。为了更好地理解 SQL 查询语句的使用&#xff0c;本文将设计一个简单的数据库&#xff0c;包括几张表&#xff0c;并通过这些表展示各种 SQL 查询的应用。 一、背景信息…
阅读更多...
大数据新视界 --大数据大厂之数据治理之道：构建高效大数据治理体系的关键步骤

大数据新视界 --大数据大厂之数据治理之道：构建高效大数据治理体系的关键步骤

&#x1f496;&#x1f496;&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎你们来到 青云交的博客&#xff01;能与你们在此邂逅&#xff0c;我满心欢喜&#xff0c;深感无比荣幸。在这个瞬息万变的时代&#xff0c;我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…
阅读更多...
java集合之map

java集合之map

在 Java 中&#xff0c;Map 是一个用于存储键值对的集合。它的主要实现类和接口包括&#xff1a; HashMap: 基于哈希表实现&#xff0c;允许键和值为 null&#xff0c;不保证顺序&#xff0c;提供常数时间复杂度的基本操作。LinkedHashMap: 继承自 HashMap&#xff0c;保持插入…
阅读更多...
最新文章

Copyright @ 2022~2023