React Native 移动开发入门教程

第一章：架构演进——从 Bridge 到 JSI

旧架构（Bridge）

JS Thread ←→ Bridge（JSON 序列化）←→ Native Thread

每次通信都要跨越 Bridge，数据序列化为 JSON。问题：列表快速滚动时掉帧（异步 + 序列化开销）。

新架构（Fabric + TurboModules + JSI）

JS Thread ←→ JSI（直接 C++ 调用）←→ Native Thread

JSI 让 JS 同步调用原生方法（参考 C++ 虚函数表），Fabric 新渲染器支持优先级调度，TurboModules 按需加载原生模块。

第二章：核心组件速查

组件	用途	对应原生
View	容器，布局	UIView / android.view
Text	文本	UILabel / TextView
TextInput	输入框	UITextField / EditText
ScrollView	滚动容器	UIScrollView / ScrollView
FlatList	高性能列表	UITableView / RecyclerView
TouchableOpacity	触控反馈	手势识别
Image	图片	UIImageView / ImageView
Modal	模态弹窗	-

第三章：导航

React Navigation 是事实标准：

npm install @react-navigation/native @react-navigation/native-stack
npx expo install react-native-screens react-native-safe-area-context

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

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Detail" component={DetailScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

第四章：样式系统

React Native 使用 CSS 子集，通过 StyleSheet.create() 定义：

const styles = StyleSheet.create({
  box: {
    flex: 1,               // Flexbox 布局（默认 column）
    backgroundColor: '#fff',
    paddingHorizontal: 16,
    marginTop: 20,
  },
});

关键差异：

• 没有 CSS 选择器、继承、级联
• 单位是无单位数字（dp/pt）
• flexDirection 默认 column（Web 是 row）

第五章：原生模块调用

需要调用相机、GPS 等原生能力时：

npx expo install expo-camera

import { Camera } from 'expo-camera';

const { status } = await Camera.requestCameraPermissionsAsync();

思考题

1. React Native 的 FlatList 和 ScrollView 性能差异的根源是什么？
2. 旧 Bridge 架构的「异步瓶颈」具体在哪？新 JSI 如何解决？
3. RN 和 Flutter 各适合什么场景？选型依据是什么？