Back to Details

react-native

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

React Native

React Native

React Native allows you to build native mobile apps using React and JavaScript/TypeScript. It renders veritable native UI components (not webviews), offering performance close to native apps while maintaining the React developer experience.
React Native 允许你使用 React 和 JavaScript/TypeScript 构建原生移动应用。它渲染真正的原生UI组件（而非WebView），在保持React开发体验的同时，提供接近原生应用的性能。

When to Use

适用场景

  • Building iOS and Android apps with a shared codebase.
  • Teams with existing React/Web expertise.
  • Apps requiring Over-the-Air (OTA) updates (via Expo Updates or CodePush).
  • Prototyping cross-platform mobile experiences rapidly.
  • 使用共享代码库构建iOS和Android应用。
  • 团队拥有现有React/Web开发经验。
  • 需要空中（OTA）更新的应用（通过Expo Updates或CodePush实现）。
  • 快速原型化跨平台移动体验。

Quick Start

快速开始

Using Expo (Recommended for 2024/2025):
bash
npx create-expo-app@latest my-app
cd my-app
npx expo start
tsx
// app/index.tsx (Expo Router)
import { useState } from "react";
import { View, Text, Button, StyleSheet } from "react-native";
import { Link } from "expo-router";

export default function Home() {
  const [count, setCount] = useState(0);

  return (
    <View style={styles.container}>
      <Text style={styles.text}>Count: {count}</Text>
      <Button title="Increment" onPress={() => setCount((c) => c + 1)} />

      <Link href="/details" style={styles.link}>
        Go to Details
      </Link>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: "center", alignItems: "center" },
  text: { fontSize: 24, marginBottom: 20 },
  link: { marginTop: 20, color: "blue" },
});
使用Expo（2024/2025年推荐方案）：
bash
npx create-expo-app@latest my-app
cd my-app
npx expo start
tsx
// app/index.tsx (Expo Router)
import { useState } from "react";
import { View, Text, Button, StyleSheet } from "react-native";
import { Link } from "expo-router";

export default function Home() {
  const [count, setCount] = useState(0);

  return (
    <View style={styles.container}>
      <Text style={styles.text}>Count: {count}</Text>
      <Button title="Increment" onPress={() => setCount((c) => c + 1)} />

      <Link href="/details" style={styles.link}>
        Go to Details
      </Link>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: "center", alignItems: "center" },
  text: { fontSize: 24, marginBottom: 20 },
  link: { marginTop: 20, color: "blue" },
});

Core Concepts

核心概念

Native Components vs Web

原生组件 vs Web组件

React Native works by bridging JavaScript to Native UI components.
  • <View>
    maps to 
    UIView
    (iOS) / 
    android.view.View
    (Android).
  • <Text>
    maps to 
    UITextView
    / 
    TextView
    .
  • New Architecture (Fabric/TurboModules): Removes the async bridge for synchronous, direct C++ communication (JSI), improving performance.
React Native 通过将JavaScript桥接到原生UI组件来工作。
  • <View>
    对应iOS的
    UIView
    / Android的
    android.view.View
    。
  • <Text>
    对应
    UITextView
    / 
    TextView
    。
  • 新架构（Fabric/TurboModules）：移除异步桥接，采用同步的直接C++通信（JSI），提升性能。

Flexbox Layout

Flexbox布局

Layouts use Flexbox (like CSS), but defaults to 
flexDirection: 'column'
(unlike row on web). Everything needs strict dimensions or flex grow capabilities.
布局使用Flexbox（类似CSS），但默认
flexDirection: 'column'
（与Web端默认row不同）。所有元素都需要严格的尺寸或flex扩展能力。

Fast Refresh

快速刷新（Fast Refresh）

React Native preserves local state while reloading components instantly on file save, significantly speeding up the dev loop.
React Native 在文件保存时即时重载组件，同时保留本地状态，显著加快开发循环。

Common Patterns

常见模式

Expo Router (File-based Routing)

Expo Router（基于文件的路由）

Modern React Native apps use 
expo-router
which mimics Next.js.
  • app/index.tsx
    -> Home screen
  • app/(tabs)/_layout.tsx
    -> Tab navigation
  • app/[id].tsx
    -> Dynamic routes
现代React Native应用使用
expo-router
，它模仿Next.js的路由方式。
  • app/index.tsx
    -> 首页
  • app/(tabs)/_layout.tsx
    -> 标签页导航
  • app/[id].tsx
    -> 动态路由

Server State (React Query)

服务端状态（React Query）

Avoid Redux for API state. Use 
TanStack Query
(React Query).
  • Caches data, handles loading/error states, and manages refetching.
避免使用Redux管理API状态，推荐使用
TanStack Query
（原React Query）。
  • 缓存数据、处理加载/错误状态，并管理重新获取逻辑。

Client State (Zustand)

客户端状态（Zustand）

For global app state (theme, auth token), 
Zustand
is preferred over Redux/Context for its simplicity and performance (selectors).
对于全局应用状态（主题、认证令牌），
Zustand
比Redux/Context更受欢迎，因为它简单且性能出色（支持选择器）。

Best Practices

最佳实践

Do:
  • Use Expo for new projects unless you have strict native code dependency needs that Config Plugins can't handle.
  • Use TypeScript for type safety.
  • Use FlashList (by Shopify) instead of 
    FlatList
    for long lists performance.
  • Use Reanimated for complex animations (runs on UI thread).
Don't:
  • Don't leave 
    console.log
    in production builds (it slows down the bridge).
  • Don't do heavy calculations in the JS thread during animations/gestures.
  • Don't define styles inside the render function (recreates objects every render).
建议：
  • 新项目优先使用Expo，除非你有Config Plugins无法处理的严格原生代码依赖需求。
  • 使用TypeScript保证类型安全。
  • 长列表性能优化：使用Shopify的FlashList替代
    FlatList
    。
  • 复杂动画使用Reanimated（运行在UI线程）。
不建议：
  • 生产构建中保留
    console.log
    （会减慢桥接速度）。
  • 动画/手势期间在JS线程执行大量计算。
  • 在渲染函数内定义样式（每次渲染都会重新创建对象）。

Troubleshooting

故障排除

ErrorCauseSolution
Metro Bundler process exited with code 1
Port in use or bad cache.
npx expo start -c
(clear cache).
Invariant Violation: View config not found
Import issues or upgrading RN versions.Check node_modules, clear watchman.
CocoaPods could not find compatible versions
iOS dependency conflict.
cd ios && pod install --repo-update
.
Text strings must be rendered within a <Text> component
Raw text directly inside View.Wrap all strings in 
<Text>
.
错误信息原因解决方案
Metro Bundler process exited with code 1
端口被占用或缓存损坏。执行
npx expo start -c
（清除缓存）。
Invariant Violation: View config not found
导入问题或RN版本升级导致。检查node_modules，清除watchman缓存。
CocoaPods could not find compatible versions
iOS依赖冲突。执行
cd ios && pod install --repo-update
。
Text strings must be rendered within a <Text> component
原始文本直接放在View内。将所有字符串包裹在
<Text>
组件中。

References

参考资料