当前位置：首页 > backend >正文

RN学习笔记 ✅

backend 2025/7/5 0:34:37

太无聊了最近，找点事做，学一下RN丰富一下技术栈🫡。但是开发APP除了RN，还有一种选择就是WebView，但是基于WebView的APP的性能被普遍认为不如RN，因为WebView本质上是一个容器，用于在应用中嵌入网页或 HTML，它最主要的工作是将Web内容（HTML、CSS和JS）渲染到应用中。基于WebView的APP就像“在手机里又下载了一个浏览器，这是这个‘浏览器’专门用来呈现这个APP的内容”？像通过uni-app开发的APP就是默认基于WebView技术的。

而RN是一个混合框架，它通过桥接将JS和原生代码（如iOS的Objective-C或Swift，Android的Java或Kotlin）连接起来，我们可以使用React来编写UI和交互，而一些性能要求较高的部分（如摄像头、加速计等）则可以通过原生模块来处理。

RN的桥接我觉得很像Electron，Electron最猛的就是“可以调用Node环境下的API，再通过进程间的通信把调用结果传递到渲染进程（UI界面）。而Node那些API干的活便是调用操作系统提供的接口 ~~(如果我没记错的话)~~”，这种做法带来的作用就是开发者“仿佛可以在浏览器环境下调用操作系统原生的功能”，也算得上一种“桥接”吧。但Electron在渲染进程里干的事又很像WebView，因为他的UI是跑在浏览器环境下的，之前在zhihu上看到过一老哥说的一句话贼经典：一想到一下载一个Electron应用，我的电脑里就多了一个V8引擎我就觉得恶心。

在这里插入图片描述

环境准备（IOS开发）：

XCode 14
watchman 2025.04.28.00（监控文件变化。brew install watchman）
cocoapods 1.16.2（包管理器，类似npm。brew install cocoapods）
初始化RN应用：npx @react-native-community/cli init MyFirstRN，React版本为19，RN版本为0.79.2
在Mac上调试：
1. cd ios
2. pod install
3. cd ../
4. yarn run ios
在iPhone上调试：指南

核心组件和原生组件

核心组件是RN内置的组件，它们封装了原生平台（iOS和Android）上的基本UI元素，包括但不限于：

View：类似于HTML中的<div>，用于布局和组织其他组件。
Text：用于显示文本内容，类似于HTML中的<span>或<p>。
Image：用于显示图片，类似于HTML中的<img>。
ScrollView：用于允许内容滚动，类似于HTML中的<div>配合overflow: scroll。
TextInput：用于用户输入文本，类似于HTML中的<input>或<textarea>。
Button：用于创建按钮，类似于HTML中的<button>。
FlatList 和 SectionList：用于高效地渲染列表数据。
TouchableOpacity 和 TouchableHighlight：用于处理触摸事件。

核心组件的优势在于它们是RN的一部分，通常具有更好的跨平台一致性。

原生组件是指直接使用原生平台（iOS或Android）的UI组件，而不是通过RN封装的组件。开发原生组件通常需要编写原生代码，因此更适合需要高度定制化和高性能的场景。iOS原生组件使用Objective-C或Swift编写，Android原生组件使用Java或Kotlin编写。

但是有一个问题：RN的项目的编程语言是JS（TS），如果我非要用原生组件则意味着要写其他语言，这还怎么整合？还是以iOS开发为例，封装原生组件的过程为：