react Native UI Component

你问的React Native UI Component（UI 组件），可以理解为：用 JavaScript/TypeScript 写的跨平台界面组件，最终映射成 iOS/Android 原生控件显示。

React Native 的 UI 组件大致分几层：

1. 基础 UI Components（官方内置）

React Native 自带一套基础组件：

View（最核心容器）

类似 Web 的<div>：

import { View } from 'react-native'; <View> <Text>Hello</Text> </View>

对应：

• Android →android.view.View

• iOS →UIView

Text（文本）

<Text> Hello React Native </Text>

对应：

• Android →TextView

• iOS →UILabel

Image（图片）

<Image source={{uri:'https://xxx.com/a.png'}} style={{width:100,height:100}} />

对应：

• Android → ImageView

• iOS → UIImageView

TextInput（输入框）

<TextInput placeholder="请输入" />

对应：

• Android → EditText

• iOS → UITextField

Button（按钮）

<Button title="点击" onPress={()=>{}} />

ScrollView（滚动）

<ScrollView> <Text>内容</Text> </ScrollView>

FlatList（高性能列表）

类似 RecyclerView：

<FlatList data={users} renderItem={({item})=> <Text>{item.name}</Text> } />

对应：

• Android → RecyclerView

• iOS → UICollectionView

2. React Native UI 组件结构

一个 RN 组件：

JS/TS | | props | React Component | Shadow Tree | Yoga Layout | Native UI Manager | ---------------- Android View iOS UIView ----------------

例如：

<View style={{ width:100, height:100, backgroundColor:'red' }}> </View>

流程：

JS ↓ View组件 ↓ RN Bridge / Fabric ↓ Android ViewGroup ↓ 屏幕显示红色方块

3. 自定义 UI Component

比如封装一个按钮：

MyButton.tsx

import { TouchableOpacity, Text } from 'react-native'; export default function MyButton(){ return ( <TouchableOpacity> <Text> 登录 </Text> </TouchableOpacity> ) }

使用：

<MyButton />

4. Native UI Component（原生组件）

如果 RN 没有提供：

比如：

• 地图

• 视频播放器

• 摄像头

• 蓝牙

• 支付控件

需要写 Native Module：

结构：

React Native | | Native UI Component | ---------------------- Android iOS Kotlin Swift/ObjC View UIView

例如：

JS:

<MapView />

实际上：

Android:

class MapView : View { }

iOS:

class MapView:UIView { }

5. React Native 新架构 Fabric UI Component

现在 RN 新架构：

React Component | | Fabric Renderer | | C++ Shadow Tree | | Native Component

相比旧架构：

旧：

JS | Bridge(JSON) | Native

新：

JS | JSI | C++ | Native

优势：

• 更快

• 少 JSON 序列化

• UI 更新同步性更好

6. 常用第三方 UI 组件库

实际开发一般不会全手写：

Material Design

React Native Paper

<Button mode="contained"> 登录 </Button>

跨平台组件

NativeBase

提供：

• Button

• Modal

• Toast

• Form

高质量商业级

Tamagui

支持：

• React Native

• Web

7. RN UI Component 和 Web React Component 区别

例如：

Web:

<div class="box"> Hello </div>

RN:

<View style={styles.box}> <Text>Hello</Text> </View>

如果你之前关注RN EventEmitter 双向通信、Native Module 注册流程，那么 UI Component 下一步通常就是学习：

JS Component | Native UI Manager | ViewManager | Android View / iOS UIView

也就是React Native 原生 UI 组件开发流程。