react native 常见问题-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_68124243/article/details/149861868

1. 使用 react native 用不用配置 Android Studio

使用 React Native 是否需要配置 Android Studio，取决于你使用哪种开发方案：

（1）如果使用 Expo（推荐初学者）：

❗不需要配置 Android Studio 也能开发和运行 React Native 项目！

🌟 特点：

快速启动，开箱即用；
可以直接在手机上运行（通过 Expo Go App 扫码预览）；
不需要配置原生开发环境（Android Studio / Xcode）；
适合开发 不需要原生模块 的项目。

你需要做的：

npm install -g expo-cli
npx create-expo-app my-app
cd my-app
npx expo start

扫码后可直接在真机中预览和调试。

（2）如果使用 React Native CLI（原生开发）：

✅ 需要配置 Android Studio（或 Xcode），才能运行和构建项目。

2. 使用 React Native做开发，避免了我们使用Kotlin 或者Swift么

是的，使用 React Native 做开发，确实可以避免直接使用 Kotlin 或 Swift 进行大部分 App 的开发工作，原因如下：

React Native 避免使用 Kotlin / Swift 的原因：

对比项	Kotlin / Swift	React Native
平台	Kotlin：Android Swift：iOS	一套代码跨平台（iOS + Android）
语言	原生语言（分别为 Android 和 iOS）	JavaScript / TypeScript
开发体验	需学习两个平台的开发体系	使用熟悉的 React 技术栈
UI 构建	使用原生 View（XML / Storyboard）	使用 React 组件（JSX）
状态管理	自行维护（如 ViewModel + LiveData）	可以用 Redux、MobX 等前端生态
热更新	原生不支持	支持热重载 / Fast Refresh

❗但注意：React Native 不是完全替代原生开发

虽然大多数业务场景都能用 React Native 完成，但 某些高性能或硬件相关场景 可能还是需要编写部分 Kotlin / Swift 原生代码，例如：

视频处理、音视频播放
蓝牙、传感器、AR 相关
与已有原生 SDK 的集成（如支付宝 SDK）
深度定制 UI 控件

不过这些情况可以通过 Native Module（原生模块）进行扩展，React Native 提供了 JS 与原生代码的通信机制（Bridge / TurboModule）。

3. Stack.Navigator 和 Tab.Navigator 区别

Stack.Navigator 和 Tab.Navigator 是 React Navigation 提供的两种不同类型的导航器（Navigator），它们的核心区别在于 UI 样式、导航行为和使用场景不同。

✅ `(1)Stack.Navigator`：栈式导航（Stack Navigation）

原理：

模拟浏览器前进/后退机制，每个页面压入一个“栈”，点击“返回”就弹出当前页面。

UI 表现：

页面从右侧滑入（iOS 风格）
默认有返回按钮

适用场景：

登录注册流程
表单填写流程
多步操作页面（如提交订单）

示例代码：

import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

<Stack.Navigator>
  <Stack.Screen name="Login" component={LoginScreen} />
  <Stack.Screen name="Register" component={RegisterScreen} />
</Stack.Navigator>

✅ (2) `Tab.Navigator`：底部标签导航（Tab Navigation）

原理：

固定底部的 Tab 栏，每个 Tab 是一个独立页面，点击切换页面而不是压栈。

UI 表现：

底部有按钮切换（常见的：首页、我的、设置）
页面不会被“覆盖”，而是“切换”

适用场景：

主界面导航
多功能模块平级切换（如微信的聊天/发现/我）

示例代码

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

<Tab.Navigator>
  <Tab.Screen name="Home" component={HomeScreen} />
  <Tab.Screen name="Profile" component={ProfileScreen} />
</Tab.Navigator>

(3) 区别总结表

对比点	Stack.Navigator	Tab.Navigator
导航方式	栈式压入（前进/返回）	标签切换（平级跳转）
UI 表现	页面滑动进入，有返回按钮	底部栏切换，通常无返回按钮
常用场景	登录页、详情页、操作流程页	首页、我的、设置等主模块
页面状态	页面切换后销毁（默认）	页面保留状态（除非配置卸载）

(4) React Navigation 导航类型一览

类型	用途	UI 表现	场景
`Stack.Navigator`	栈式导航	页面前进/后退	表单、详情页
`Tab.Navigator`	底部导航	标签切换	首页、我的
`Drawer.Navigator`	抽屉菜单	左右滑出菜单	设置页、侧边栏导航
`MaterialTopTabNavigator`	顶部 Tab	顶部切换 + 滑动	新闻类、分类切换
嵌套导航	灵活组合	多层级结构	大型 App
`NavigationContainer`	导航容器	无 UI	所有导航的入口

(5) 导航操作函数（Navigation API）

📦 常见操作：

navigation.navigate('Page') → 跳转
navigation.goBack() → 返回
navigation.replace() → 替换当前页
navigation.reset() → 重置整个导航栈

4. React Native 中的核心组件，是对原生组件的封装

(1) 什么是“核心组件”？

React Native 提供了一些内置组件（也叫核心组件，Core Components），如：

组件名	功能	对应平台原生控件
`View`	布局容器	iOS: `UIView` / Android: `ViewGroup`
`Text`	显示文字	iOS: `UILabel` / Android: `TextView`
`Image`	图片展示	iOS: `UIImageView` / Android: `ImageView`
`ScrollView`	滚动容器	iOS: `UIScrollView` / Android: `ScrollView`
`TextInput`	文本输入框	iOS: `UITextField` / Android: `EditText`
`Pressable` / `TouchableOpacity`	可点击区域	iOS: `UIButton` / Android: `Button`

这些组件是 JavaScript 层的封装形式，它们的底层本质，最终会渲染成原生平台上的 UI 组件。

(2) 为什么要“封装原生组件”？

React Native 的目标是：用 JS 编写跨平台 App，最终呈现原生体验。

为了实现这一点，它把 iOS / Android 各自的原生控件 用统一的 API（如 <View>）包装起来，让开发者可以：

不用直接写原生代码（如 Swift / Kotlin）
通过 React 风格的组件来控制原生界面

你写的 JSX：

<View>
  <Text>Hello World</Text>
</View>

最终通过 React Native 框架，被转译为原生控件：

在 iOS 中是一个 UIView + UILabel
在 Android 中是一个 ViewGroup + TextView

(3) 这背后发生了什么？

React Native 框架内部有一个桥（Bridge）机制，会把你写的 JS 代码转换为原生组件的命令。

即：你在 JS 写 <Text>Hello</Text>，React Native 会通过 Bridge 告诉系统“创建一个 TextView，内容是 Hello”。

React Native 的运行时将自动完成：

组件渲染 → 转换成原生 UI 控件
样式转换（JS 中写 style={{ color: 'red' }} → 原生的属性样式）
事件绑定（比如点击事件、滚动事件）

(4) 举个简单类比

你可以把 React Native 理解为：

一种 中介层，它把“前端 React 风格的语法”翻译成“iOS / Android 的原生控件”。

就像：

你写的	实际呈现
`<Text>`	iOS：UILabel
`<Image>`	Android：ImageView
`<Button>`	iOS/Android：系统原生按钮控件
`<FlatList>`	iOS：UITableView / Android：RecyclerView

(5) 为什么这种封装很重要？

它带来了几个好处：

跨平台开发统一 API（你写一份代码，两个平台都能跑）
性能好（底层是原生控件，不是网页 WebView）
学习成本低（只要会 React 和 JS 就能写 App）

总结一句话：

React Native 的核心组件（如 View、Text、Image 等），本质是 React 层的 JavaScript 包装器，它们会映射到底层 iOS/Android 的原生控件，从而实现跨平台的原生 UI 渲染效果

5. `Expo` 与 `React Native` 的关系

(1) Expo 是什么？

Expo 是一个 React Native 的开发工具链和平台，它基于 React Native，帮你简化了项目的搭建、打包、测试、发布流程。

一句话解释：Expo 是构建 React Native App 的“加速器”和“打包助手”。

它帮你省掉了以下麻烦事：

功能	如果不用 Expo 要做什么	有了 Expo 之后
环境搭建	手动安装 Android Studio、Xcode、配置 SDK	一行命令 `npx create-expo-app` 就行
真机预览	配置模拟器或 USB 调试	扫码即开，无需模拟器
打包发布	需要配置原生打包脚本、证书等	一条命令 `npx expo export` 自动搞定
原生模块管理	需要配置原生代码（如相机、推送）	Expo 已封装大多数常用功能（如摄像头、定位）

(2) Expo 与 React Native 的关系

React Native 是底层框架（核心）：提供 <View> <Text> <Image> 等核心组件，桥接 JS 与原生 UI。
Expo 是上层工具平台：基于 React Native 提供“更友好的开发体验”。

我们可以这样比喻：

React Native 就像 Android 原生系统
Expo 就像小米定制的 MIUI 系统（基于安卓，但加入了很多便捷工具）

✅ React Native 是必须的，Expo 是可选的。

你可以：

方式	说明
用 React Native 原生方式搭建	你要手动配置 iOS/Android 原生环境、手动引入原生模块
用 Expo 搭建	零配置，快速开发，但默认不能写原生代码（可通过 eject 弹出）

(3) Expo 有什么优点？

优点	说明
📦 零配置开发环境	不用安装 Xcode / Android Studio 也能写 App
📱 手机扫码预览	使用 Expo Go app 实时查看代码效果（连真机都不用连接）
🛠 丰富的内置 API	拍照、推送、定位等常用原生功能都内置好了
🧪 热重载和调试	开发时支持 HMR 热重载、Web 控制台调试
☁️ 一键打包和发布	你不需要动原生打包工具就能打包 APK / IPA 上传商店

(4) Expo 有什么限制？

限制	说明
❌ 无法使用不支持的原生模块	如果你需要自定义原生代码（写 Java/Swift），Expo 默认不支持
✅ 可通过 `eject` 解决	Expo 支持一键 eject，把项目变成纯 React Native 项目，获得原生能力

(5) 总结一句话

**Expo 是构建 React Native 应用的开发平台，它简化了 React Native 的开发流程，适合快速开发和体验原型。**React Native 是底层核心框架，Expo 是它的开发加速器。

(6) 什么时候该用 Expo？

适合用 Expo 的场景	不适合用 Expo 的场景
刚入门 React Native	你需要写原生模块（如蓝牙、支付 SDK）
做 MVP 原型开发	项目对体积和性能极致要求
想快速上线 App	需要对 Android/iOS 原生系统做高度定制
不熟悉 Android Studio/Xcode	-

6. FlatList, SectionList, VirtualizedList

(1) FlatList：适合“扁平数据”列表

使用场景：纯列表数据，比如消息列表、商品列表。
数据结构：一维数组。

<FlatList
  data={[{ id: '1', title: 'Item1' }, { id: '2', title: 'Item2' }]}
  renderItem={({ item }) => <Text>{item.title}</Text>}
  keyExtractor={item => item.id}
/>

(2) SectionList：适合“分组数据”列表

使用场景：有分组（section header）需求的列表，比如城市索引列表、聊天记录（按日期分组）。
数据结构：嵌套数组（每一组是一个 section）。

<SectionList
  sections={[
    { title: 'A', data: ['Apple', 'Avocado'] },
    { title: 'B', data: ['Banana', 'Blueberry'] },
  ]}
  renderItem={({ item }) => <Text>{item}</Text>}
  renderSectionHeader={({ section: { title } }) => (
    <Text style={{ fontWeight: 'bold' }}>{title}</Text>
  )}
  keyExtractor={(item, index) => item + index}
/>

总结对比表：

比较项	`FlatList`	`SectionList`
数据结构	一维数组	多维数组（带 `title` 和 `data`）
是否支持分组	❌ 不支持	✅ 支持（带分组标题）
场景	聊天记录、商品列表	城市索引、分类菜单、历史记录（按天）
Header 支持	✅ 支持 `ListHeaderComponent`	✅ 支持 `renderSectionHeader`

(3) VirtualizedList

VirtualizedList 是 React Native 中所有高性能列表组件（如 FlatList 和 SectionList）的底层基础组件，它是最通用、可定制性最高的虚拟列表实现。

FlatList 和 SectionList 是对 VirtualizedList 的封装，简化了使用场景。
如果你有复杂数据结构或者特别的性能需求，可以直接使用 VirtualizedList。

✅ 为什么叫 “Virtualized”

“Virtualized” 的意思是“虚拟化渲染” —— 只渲染可视区域的列表项，随着滚动懒加载其他内容，以提高性能、避免卡顿。

import { VirtualizedList, Text } from 'react-native';

const MyVirtualizedList = () => {
  const data = Array.from({ length: 1000 }, (_, i) => `Item ${i + 1}`);

  return (
    <VirtualizedList
      data={data}
      initialNumToRender={10}
      renderItem={({ item }) => <Text>{item}</Text>}
      keyExtractor={(item, index) => index.toString()}
      getItemCount={() => data.length}
      getItem={(data, index) => data[index]}
    />
  );
};

和 FlatList 的区别？

特性	FlatList	VirtualizedList
数据结构	扁平数组	任意结构（只需提供 `getItem` 等）
使用难度	简单	较复杂，需手动实现 getItem 等
推荐使用场景	绝大多数常规列表场景	特殊数据结构、大型数据处理场景
是否底层组件	❌ 封装后的组件	✅ 是 FlatList、SectionList 的基础