[!info] related notes

• 所属配置: android-development-environment-setup
• 同类框架: expo
• 相关概念: ecmascript-moc, react-moc

React Native

一句话定义

React Native 是 Meta（Facebook）维护的跨平台框架，用 React 的组件模型编写 JavaScript/TypeScript 代码，编译为 iOS 和 Android 原生应用。

两种开发方式

方式	说明	适合
Expo	开箱即用，无需碰原生代码	大多数项目，快速迭代
React Native CLI	完全控制原生层	需要自定义原生模块

详见 expo。

环境前置（Android）

完整配置见 android-development-environment-setup。

• JDK 17+
• Node.js 18+
• Android SDK（API 33+）
• ANDROID_HOME 环境变量
• Android 模拟器或真机

创建项目

Expo（推荐）

npx create-expo-app MyApp
cd MyApp
npx expo start

React Native CLI

npx @react-native-community/cli init MyApp
cd MyApp
npx react-native run-android

核心概念

组件映射

React (Web)	React Native
<div>	<View>
<span> / <p>	<Text>
<img>	<Image>
<button>	<TouchableOpacity>
<input>	<TextInput>
<ScrollView>	<ScrollView> / <FlatList>

样式

使用 StyleSheet.create()，类似 CSS 的子集：

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  text: { fontSize: 18, color: '#333' },
});

• 默认 flexDirection: 'column'（与 CSS 相反）
• 没有 px 单位，数字直接等于逻辑像素
• 不支持所有 CSS 属性（无 float、无继承等）

导航

通常使用 React Navigation：

npm install @react-navigation/native @react-navigation/stack

原生模块

当 JS 能力不够时，用 Java/Kotlin（Android）或 Objective-C/Swift（iOS）编写原生模块，通过桥接机制供 JS 调用。

调试

• Metro：JavaScript 打包器和开发服务器
• React DevTools：组件树和状态检查
• adb logcat：查看原生日志（见 adb）
• Shake 手机 或 Cmd+M（模拟器）打开开发者菜单

常见问题

问题	解决
Metro 启动失败	检查端口 8081 是否被占用
run-android 失败	确认 ANDROID_HOME 和模拟器/设备就绪
白屏	检查 Metro 终端的 JS 错误日志
原生模块找不到	iOS 需 pod install，Android 需 gradle sync