React-Native 开发实用指南｜环信学院

news2025/1/10 15:56:29

本文主要介绍 React-Native 的实际使用经验，对于想要快速入门的同学是有帮助的。

作者 | 佐玉
出品 | CSDN（ID：CSDNnews）

1、整体介绍

首先说， React-Native 用来做什么？传统的开发中，按照平台划分为 iOS , Android , Windows 和 Mac 。其中，随着移动设备的使用移动端应用的开发也越来越多。传统上 iOS 应用使用 Xcode 工具、 Objective-C 和 Swift 语言进行开发， Android 应用使用 Android Studio 工具、 Java 和 kotlin 语言进行开发。随着开发的普及和应用的成熟度，就有人希望能够用统一的的技术完成更多平台的开发，降低开发成本，提升开发效率，在这样的情况下，2015 年 React-Native 诞生了。

React-Native 这个技术主要解决了多个平台的开发成本和效率问题，只需要掌握前端技术的同学了解一些的 iOS 和 Android 的知识就可以实现跨平台的应用开发（为了的方便，我们将用 原生 或者 Native 开发代替 iOS 和 Android 开发进行叙述）。随着使用的增加和技术的深入，尤其对性能优化都需要对原生部分有深刻的了解，有些项目还需要编写原生代码实现，所以， React-Native 的开发并没有官方说的那么容易和美好。React-Native 的开发技术上要求比原生更高，需要的技术是 前端技术 + 原生技术。

Flutter 也是一门跨平台解决方案，但是和 React-Native 不同的是，它是一个全新的技术，包括使用的语言都是全新的 Dart 语言，技术层面采用了三棵树的模式，底层渲染直接和 C++ 交互，而 React-Native 中间层原来采用 bridge ，现在使用 Fabric 等技术提升效率和性能，总体上来说，都是同范畴的技术，项目选型之初看个人喜欢和团队配置，技术本身都是大公司支持，不需要担心资源和维护问题。从两者的标星量上看，目前 Flutter 以 145K 领先一大截。

2、开发环境

任何技术的入门都离不开环境的配置，记得当初配置一套后端开发环境都要好多繁琐的步骤，现在前端的开发环境配置也不太轻松，尤其当今处理器架构都出现了跨平台现象， ARM 架构处理器可以运行桌面系统，模拟器可以是 x86 架构，也可以是 ARM 架构，对于应用来说，可能为了应付这些情况，需要同时包含多套架构的二进制可执行程序和依赖库。对于开发者，可能需要模拟多种环境来开发调试发布程序，来保证使用者的体验。所以，配置环境的这门技术在我看来也算是技术中的灰色地带了。

当你作为一个新人，打开 React-Native 官网，想要从 get started 开始，以为一切都很美好，那么，可能是一个 hello 程序都弄半天才跑起来，原因就是开发环境并不像它们介绍的那么简单，实际上这是一个综合性的技术能力，比如，一个对系统有深入了解的，对软件开发有很多研究的人，一个对系统没有什么了解，基础的 bash 命令和其他工具都没有用过多少人来说，配置环境的难易程序是完全不同的了。

React-Native 的开发环境，不仅仅需要安装官网的介绍(中文官网-环境搭建)，还需要更多，这里就进行一一介绍。

以 MacOS 开发环境为例，需要安装 Nodejs (JavaScript 语言运行的必要环境), watchman (程序调试必要组件，检查文件改动状态)。还需要哪些工具呢，让我们从创建一个 helloApp 应用开始。

创建应用 helloApp 应用，需要执行命令 npx react-native init helloApp 。里面用到了 npx 和 React-Native , npx 是 npm run 的缩略，所以，需要安装 npm ，而 npm 集成在了 nodejs 工具集所以不需要单独安装， react-native 是 npm 包，一般会自动安装不需要管理，安装 Nodejs 的方式主要有两种，第一种官网下载安装，第二种（推荐） brew install node , 因为 brew 是 MacOS 非常常用的工具管理器，很多工具都是通过该工具安装， brew 安装的工具维护和管理起来非常方便，而且后续，其它的工具可能没有官网下载安装方式。而 brew 安装也是需要手动的，全新 MacOS 并没有该工具，而在中国大陆，安装 brew 还是有些麻烦，如果你使用的是最新苹果 m1 或者 m2 芯片的设备，那么可能需要考虑 ARM 架构运行 x86 程序的问题。所以，你看说到这里，开发环境的配置并没有想象中的轻松。有些是对工具需要了解和熟悉，有些需要对系统工具的熟悉，有些对场景的考虑，如果是新人这些问题在所难免，所以为了更加高效的安装请像下面这样的执行。

首先，建议 电脑系统保证最新，或者保证电脑系统软件组件是同一个时期的产品，尽量减少兼容性问题。

其次，确定是 x86 还是 ARM 架构芯片，如果是 ARM 架构，需要在了解 rosetta 模式 和 arch 命令

安装工具的工具brew ，如果是中国大陆, 请参考, 如果网络足够好，可以尝试官网直接安装brew 官网。

如果已经安装了 brew 检查版本，如果太过老旧请下载重新安装，如果在一定范围内可以考虑更新。

到这里前提的开发环境准备才算是走上正轨。

下面就是使用 brew 安装 Nodejs , watchman , cocoapods , 如果是 ARM架构设备还需要更新 ruby 。React-Native 一般进行项目依赖管理使用 yarn 工具, 请使用 npm install -g yarn 安装。实际开发工具还有 Visual Studio Code 或者 webstorm , 如果是 VSCode 需要安装对应的插件。

以上这些是开发前端的开发调试配置。

对于开发 iOS 需要安装 Xcode 以及对应命令行工具。Xcode 13 大概 15 GB 左右。

对于开发 Android 需要安装 Android Studio 以及 adb 工具，还需要配置环境变量。里面自带的 jdk 如果不满足需求可以自行安装， oracle jdk 和 open jdk 的差别不大，一个商业收费一个开源免费。Android Studio 安装包本身不大 1 GB 左右，但是后续下载的 ndk 很大，一个版本就 4/5 GB 。

最后，由于最新 React-Native 版本已经是 ~0.69.0 ，对应 React 版本 ~18.0.0 , 它们和之前的版本兼容性很大，建议使用稳定长期的 TLS 版本，如果最新版本中遇到问题请参考他们的 issues 。

项目运行建议使用 yarn 工具，实际上，很多人习惯于 npm 进行依赖，但是，从性能还是 React-Native 都建议使用 yarn ，具体 npm 和 yarn 可以自行查阅。
在这里插入图片描述
3、创建项目

可能有人会觉得，这个就没有必要介绍了吧，这样想的人可以问自己几个问题:

  • 如何创建支持 TypeScript ?
  • 如何指定在创建时指定 React-Native 的版本?
  • 如何创建 module 项目给别人用？
  • 如何创建支持 Windows 或者 MacOS 平台的应用?
  • 集成 React-Native 到现有原生应用?

以上这些问题不难就是有些零碎，需要去查找，如果恰好有你关注的问题那就看完这个章节吧，如果没有则跳过。

创建支持 TypeScript 的项目:

npx react-native init AwesomeTSProject --template
react-native-template-typescript

创建指定版本的项目:

npx react-native init AwesomeProject --version X.XX.X

创建 module 的项目个其他应用使用:

npx create-react-native-library@latest react-native-awesome-library

创建 windows 项目:

npx react-native init --template react-native@^0.70.0 cd
projectName npx react-native-windows-init --overwrite

集成到现有原生项目:参考这里

iOS 部分

需要使用 pod install 生成 .xcworkspace 文件，Xcode 打开这个文件进行原生部分的编译、调试和运行。

Android 部分

需要使用 Android studio 打开 Android 文件夹进行原生部分的编译、调试和运行。

4、原生部分介绍

React-Native 这个技术框架，不仅仅有前端开发和实现，原生部分也是必不可少的，只是有时候不需要手动实现被忽略了而已，举个典型应用场景，我们需要写一个插件给 React-Native 应用使用，而插件本身依赖其他原生插件。这时候，我们需要编写原生代码来 桥接 原生插件。

前端部分可以使用 vscode 开发和调试，原生部分的开发和调试需要使用 Xcode 和 Android Studio 。

实际上，在 React-Native 运行之前， Web 部分使用 metro 工具将 javascript 代码打包成成 bundle 文件，在原生运行开始的时候，加载并读取文件，在调试模式下，还需要启动 javascript 引擎运行 javascript 程序，这个程序就是 通过 yarn start 运行的调试服务，在 release 模式下，不需要运行该服务。

例如: iOS 的加载资源文件源码:

  • (NSURL *)sourceURLForBridge:(RCTBridge *)bridge { #if DEBUG return [[RCTBundleURLProvider sharedSettings]
    jsBundleURLForBundleRoot:@“index” fallbackResource:nil]; #else return
    [[NSBundle mainBundle] URLForResource:@“main”
    withExtension:@“jsbundle”]; #endif }

开发原生需要注意的以下几个方面内容。这是让程序正常运转的关键点。

Web 部分

对于 Web 部分需要调用和接收原生的数据，主要的对象包括:

NativeModules 是原生的句柄，想要调用原生的对象和方法需要用到。例如，原生提供方法 callMethod , 则使用 NativeModules.callMethod 调用。

NativeEventEmitter 是原生的事件订阅对象，想要接收原生的消息和数据需要用到。

例如:

// NativeModuleApi 原生对象名import{ NativeEventEmitter, NativeModules
}from"react-native";const NativeModuleApi =
NativeModules.NativeModuleApi ? NativeModules.NativeModuleApi
:throw’Get native module is error’;const eventEmitter
=newNativeEventEmitter(NativeModuleApi);

iOS 部分

对于 iOS 部分需要接收和发送数据给 web，主要的对象包括:

接收来自 web 的调用，需要满足:

  • 需要实现模块，调用 RCT_EXPORT_MODULE(NativeModuleApi)
  • 需要实现具体方法，实现
RCT_EXPORT_METHOD(callMethod
(NSString *)methodName
(NSDictionary *)params
(RCTPromiseResolveBlock)resolve
(RCTPromiseRejectBlock)reject) {}
需要实现执行的事件，不然无法正常接收消息
  • (NSArray<NSString *> *)supportedEvents {}
    发送数据给 web，需要满足:
  • 实现事件发送类

#import <Foundation/Foundation.h> #import <React/RCTBridgeModule.h> #import <React/RCTEventEmitter.h> @interface NativeModuleApi : RCTEventEmitter @end

  • 调用 RCTEventEmitter 的方法 - (void)sendEventWithName:(NSString
    *)eventName body:(id)body 发送数据。

Android 部分
对于 Android 部分需要接收和发送数据给 web，主要的对象包括:
接收来自 web 的调用，需要满足:

  • 实现 ReactContextBaseJavaModule 消息接收类

@ReactModule(name = NativeModuleApi.NAME) public class NativeModuleApi
extends ReactContextBaseJavaModule implements ExtSdkApi { public
static final String NAME = “NativeModuleApi”; public void
initialize() {} public void invalidate() {} public void
callMethod(String methodType, ReadableMap params, Promise promise) {}
}

发送数据给 web，需要满足:

  • 保存数据发送对象

private DeviceEventManagerModule.RCTDeviceEventEmitter eventEmitter = reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class);

  • 使用 RCTDeviceEventEmitter 发送数据

eventEmitter.emit(eventName, data);

5、开发调试部分
在开发和调试模式下，需要额外运行服务来保证 JavaScript 和原生的混合使用。具体运行服务器命令 react-native start，如果需要运行多台设备而不相互干扰，可以添加参数 --port ${1024 - 65536}。对于 Android 设备还需要设置数据转发，都 2022 年了，99%以上的 Android 手机都是 5.0 版本以上，所以，需要设置一下数据转发 adb reverse tcp:8081 tcp:8081，同样可以设置不同端口转发数据，典型应用同时调试多台设备。对于 HarmonyOS 系统，2.0 以及之前的版本可以和 Android 系统兼容，最新 3.0 系统并不兼容，具体可以看最新的参考资料。

调试 UI 部分

可以使用工具 react-devtools，通过命令npm install -g react-devtools 安装。
调试如图：
在这里插入图片描述

调试源码部分

可以使用 VSCode 直接调试，或者使用 浏览器调试。
使用 VSCode 调试，需要安装必要插件：React Native Tools。对于格式化可以安装 prettier 插件。
以 iOS 为例，可以通过命令 react-native run-ios 从终端启动，也可以通过打开 iOS 文件夹下的工作空间文件使用 xcode工具启动，启动之后，通过 vscode 附加进程实现，如果是使用浏览器调试，可以在终端输入 d 或 摇晃手机，弹出 debug 调试界面选择浏览器调试。
通过 VSCode 调试有点麻烦，需要先进行配置 launch.json

{ “version”: “0.2.0”, “configurations”: [
{
“name”: “Attach to packager”,
“request”: “attach”,
“type”: “reactnative”,
“cwd”: “${workspaceFolder}/example”
} ] }

VSCode 附加进行配置如图：
在这里插入图片描述
VSCode 调试过程如图：
在这里插入图片描述

真机或者模拟器调试模式如图：
在这里插入图片描述

浏览器调试如图：
在这里插入图片描述
启动服务如图：
在这里插入图片描述

注意：执行调试的时候的根目录很重要，如果不在根目录可能需要手动设置，比较麻烦。

6、测试和验证
创建项目的时候会提供 tests 文件夹，里面的文件可以编写测试代码。示例代码如下：

test(“given empty GroceryShoppingList, user can add an item to it”, ()
=> { const { getByPlaceholder, getByText, getAllByText } = render(
);

fireEvent.changeText(getByPlaceholder(“Enter grocery item”),
“banana”); fireEvent.press(getByText(“Add the item to list”));

const bananaElements = getAllByText(“banana”);
expect(bananaElements).toHaveLength(1); // expect ‘banana’ to be on
the list });

注意：关于带有原生代码进行单元测试，目前还有问题，启动提示没有加载动态库，这个知道的同学可以留言给我。

7、最后

任何炫酷的技术背后，都是扎实的基础，希望同学们在这篇实用指南中或多或少的有所收获。

后续有时间再讲述界面渲染、推送相关、打电话相关，性能优化等实用技巧。也欢迎各位点评指正。

作者介绍：

佐玉，85后，环信研发工程师，从事即时通讯行业十年以上，负责过多个中大型项目Windows、Mac、iOS、Android等平台的客户端研发，技术从底层协议、业务逻辑到界面设计都全程参与。目前主要从事跨平台的技术研发工作，对React-Native、Flutter技术都有广泛的理解和实践。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/189532.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

编译原理学习笔记16——语义分析和中间代码生成1

编译原理学习笔记16——语义分析和中间代码生成1

编译原理学习笔记16——语义分析和中间代码生成116.1 中间语言16.2 常用的中间语言形式16.1 中间语言 中间语言的特点和作用 特点 独立于机器复杂性界于源语言和目标语言之间 引入中间语言的优点 使编译程序的结构在逻辑上更为简单明确便于进行与机器无关的代码优化工作易于移…
阅读更多...
力扣刷题|110.平衡二叉树、257. 二叉树的所有路径、404.左叶子之和

力扣刷题|110.平衡二叉树、257. 二叉树的所有路径、404.左叶子之和

LeetCode 110.平衡二叉树 题目链接&#x1f517; LeetCode 110.平衡二叉树 思路 递归三部曲分析&#xff1a; 明确函数的形参和返回值 参数&#xff1a;当前传入结点 返回值&#xff1a;以当前传入结点为根节点的树的高度 那么如何标记左右子树是否差值大于1呢&#xff…
阅读更多...
3、SpringJdbcTemplate声明式事务

3、SpringJdbcTemplate声明式事务

JdbcTemplate基本使用 01-JdbcTemplate基本使用-概述(了解) JdbcTemplate是spring框架中提供的一个对象&#xff0c;是对原始繁琐的Jdbc API对象的简单封装。spring框架为我们提供了很多的操作模板类。例如&#xff1a;操作关系型数据的JdbcTemplate和HibernateTemplate&…
阅读更多...
在Anaconda中安装pytorch的详细步骤+PyCharm环境配置

在Anaconda中安装pytorch的详细步骤+PyCharm环境配置

前言 深度学习小白一枚&#xff0c;自己的笔记本配置如下&#xff1a; 显卡&#xff1a;NVIDIA GeForce MX150&#xff08;非常垃圾的笔记本显卡&#xff09;固态硬盘 256GCPU&#xff1a;lntel Core™i7-8550UWindows&#xff1a;Windows 11家庭中文版 其他配置&#xff1a;…
阅读更多...
代驾app开发开发搭建，代驾系统软件源码

代驾app开发开发搭建，代驾系统软件源码

在当下移动互联网发展的今天&#xff0c;大家对于生活的追求更加的趋向于其便捷性&#xff0c;这使得各种各样app被开发出来&#xff0c;出现在我们的生活之中。现在就把近期比较火的代驾app开发开发搭建的一些方案介绍一下。 代驾app产生的原因 代驾行业的快速发展&#xf…
阅读更多...
＜Java EE 进阶＞ Spring 创建和使用

＜Java EE 进阶＞ Spring 创建和使用

目录 1.创建Spring项目 &#xff08;1&#xff09;创建一个Maven项目 &#xff08;2&#xff09;添加 Spring 框架支持&#xff08;spring-context、spring-beans&#xff09; &#xff08;3&#xff09;添加启动类 2.存储 Bean 对象 &#xff08;1&#xff09;创建 Bean …
阅读更多...
计算几何知识(其一)

计算几何知识(其一)

前提 最近闲着没事就看了计算几何的一些知识 构建凸包 Incremental Construction 复杂度为O(n2)原理就是不停蚕食下一个合适的点。判断原理是&#xff0c;第X个极点和前n个极点构成的多边形会有切点S&#xff0c;T。 和这两个点的连线&#xff0c;把原先多边形分成两个区域…
阅读更多...
【软件测试】翻了下招聘APP只会点点点，很慌......测试业务？技术？

【软件测试】翻了下招聘APP只会点点点，很慌......测试业务？技术？

目录&#xff1a;导读前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09;前言 我猜想大伙的职业生…
阅读更多...
从0到0.1学习 maven(二：坐标、依赖和仓库)

从0到0.1学习 maven(二：坐标、依赖和仓库)

该文章为maven系列学习的第二篇 第一篇快速入口&#xff1a;从0到0.1学习 maven(一&#xff1a;概述及简单入门) 第二节&#xff1a;坐标、依赖与仓库坐标依赖依赖范围传递性依赖依赖调解可选依赖依赖排除归类依赖优化依赖仓库路径生成仓库分类本地仓库远程仓库快照部署至远程仓…
阅读更多...
Day 16 Enable注解

Day 16 Enable注解

Springboot中提供了很多Enable开头的注解&#xff0c;这些注解是冬天开启某些功能的&#xff0c;而其底层使用Import注解导入一些配置类&#xff0c;实现Bean的动态加载1 EnableAutoConfigurationTarget(ElementType.TYPE) Retention(RetentionPolicy.RUNTIME) Documented Inhe…
阅读更多...
京东十年T8架构师手撕MySQL：手写666页核心知识，超85%问题全解

京东十年T8架构师手撕MySQL：手写666页核心知识，超85%问题全解

MySQL是开放源码的关系数据库管理系统&#xff0c;由于 性能高、成本低、可靠性好&#xff0c;成为现在最流行的开源数据库。 MySQL学习指南 笔记包含了3个大章节&#xff0c;13个小章节&#xff1a; 基础篇 MySQL数据类型MySQL运算符MySQL函数MySQL数据库查询语句 核心篇 …
阅读更多...
​力扣解法汇总2319. 判断矩阵是否是一个 X 矩阵

​力扣解法汇总2319. 判断矩阵是否是一个 X 矩阵

目录链接&#xff1a; 力扣编程题-解法汇总_分享记录-CSDN博客 GitHub同步刷题项目&#xff1a; https://github.com/September26/java-algorithms 原题链接&#xff1a;力扣 描述&#xff1a; 如果一个正方形矩阵满足下述 全部 条件&#xff0c;则称之为一个 X 矩阵 &#…
阅读更多...
自动化设备ERP系统对企业管理有什么好处？

自动化设备ERP系统对企业管理有什么好处？

随着自动化设备制造企业的快速发展&#xff0c;规模和产能的不断扩大&#xff1b;设备也不断增加、品种越来越多&#xff1b;企业信息化建设也不断发展和完善, 自动化设备ERP系统已经成为企业信息化建设的一个有机组成部分。自动化设备管理已进入信息化、数字化时代。自动化设备…
阅读更多...
机器学习之求解无约束最优化问题方法(手推公式版)

机器学习之求解无约束最优化问题方法(手推公式版)

文章目录前言1. 基础知识1.1 方向导数1.2 梯度1.3 方向导数与梯度的关系1.4 泰勒展开公式1.5 Jacobian矩阵与Hessian矩阵1.6 正定矩阵2. 梯度下降法3. 牛顿法4. 拟牛顿法5. 代码实现结束语前言 本篇博文主要介绍了机器学习里面的常见的求解无约束最优化问题的方法&#xff0c;包…
阅读更多...
LeetCode——1664. 生成平衡数组的方案数

LeetCode——1664. 生成平衡数组的方案数

一、题目 给你一个整数数组 nums。你需要选择恰好一个下标&#xff08;下标从0开始&#xff09;并删除对应的元素。请注意剩下元素的下标可能会因为删除操作而发生改变。 比方说&#xff0c;如果 nums [6,1,7,4,1] &#xff0c;那么&#xff1a; 选择删除下标 1 &#xff0…
阅读更多...
在CentOS-6.9部署apache服务

在CentOS-6.9部署apache服务

文章目录一 系统环境二 部署服务2.1 yum安装软件2.2 修改主配置文件2.3 修改防火墙规则2.4 访问测试三 主配置文件参数3.1 主配置文件常规语句3.2 主配置文件日志控制语句3.3 主配置文件的性能控制语句一 系统环境 参数值主机IP10.0.0.100主机名test操作系统版本CentOS releas…
阅读更多...
css 过渡动画

css 过渡动画

目录过渡动画1 css 属性1.1 transform 变换&#xff08;平移旋转缩放&#xff09;1.2 animation 动画1.2.1 keyframes1.3 transition 过渡1.4 比较2 方式2.1 css 伪类2.2 vue <Transition> 组件2.2.1 默认名称2.2.2 自定义名称2.2.3 自定义 class2.2.4 配合 animation2.2…
阅读更多...
sqlserver存储过程简单游标示例

sqlserver存储过程简单游标示例

test数据库有表如下&#xff1b; 创建一个存储过程&#xff0c;输出姓名和电话&#xff1b; CREATE PROCEDURE printname AS BEGINDECLARE sName varchar(20), phone varchar(20)DECLARE cursor1 CURSOR FOR --定义游标SELECT name,phonenumber from t_student OPEN cursor1 …
阅读更多...
OpenStack的“神秘组件” 裸金属(Ironic)管理使用

OpenStack的“神秘组件” 裸金属(Ironic)管理使用

OpenStack是目前全球部署最广泛的开源云基础架构&#xff0c;在OpenStack中提供的裸金属服务的项目是Ironic。OpenStack的官网主要介绍裸金属的用途在如下5方面&#xff1a; &#xff08;1&#xff09;高性能计算&#xff1b; &#xff08;2&#xff09;无法虚拟化的硬件设备的…
阅读更多...
DSVW通关教程

DSVW通关教程

DSVW通关教程 首先整体浏览网站 Blind SQL Injection (boolean) 基于布尔型的盲注: HTTP请求的响应体中不会明确的返回SQL的错误信息, 当把参数送入程序查询时&#xff0c;并且在查询条件为真的情况下返回正常页面&#xff0c;条件为假时程序会重定向到或者返回一个自定义的错…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023