手帐 Blog

主题

07 · React Native 入门：环境、导航与 Web 心智差异 ​

目标：环境跑通 Hello World；用 React Navigation 搭最小栈导航；说清与 DOM / uni-app 的心智差异。

1. 背景与目标 ​

前六篇：PWA → Capacitor（WebView）→ uni-app 编译多端。
React Native（RN）换模型：JS 业务逻辑 + 原生控件渲染，不是 HTML/CSS DOM，也不是小程序双线程 DOM 子集。

本篇独立脚手架，不接入 Journal monorepo。原生模块与商店打包见 08。

2. 核心概念 ​

概念Web / uni-appReact Native
布局节点div / viewView、Text、Image 等（无任意 HTML 标签）
样式CSS / rpx / Tailwind 等StyleSheet；Flexbox 为主；无完整 CSS 选择器世界
导航Vue Router / 小程序页面栈常用 React Navigation（库，非 RN 内置）
手势与列表DOM / scroll-viewPressable、FlatList 等；列表虚拟化是常态
调试Chrome DevToolsMetro bundler + React DevTools / Flipper 等（随官方推荐变）

官方推荐入门路径（以文档为准） ​

近年官方主推 框架级脚手架（如 Expo）降低原生环境痛苦；也支持「裸」RN CLI。
本系列建议：先 Expo 跑通 Hello World + 导航，理解模型后再决定是否 eject / 进裸工程（08 打包会提到差异）。

版本与命令变化快——以 React Native 官方 Getting Started 当日页面为准，下文命令为示意。

3. 最小实践 ​

3.1 创建并跑起来 ​

bash
# 示意：按官方文档选择 Expo 或 CLI
npx create-expo-app@latest RnDemo
cd RnDemo
npx expo start

用 Expo Go 扫码真机，或 Android 模拟器 / iOS 模拟器（iOS 需 Mac）。
验收：改 App 里一行文字，热更新能看见。

3.2 心智对照练习（写在笔记里） ​

你想做的事WebRN
一段文字<p> / <text>必须包在 <Text> 里
点击onClickonPress（Pressable / Button）
滚动长列表随便 map优先 FlatList / SectionList
链接跳转<a href>导航库 navigation.navigate

3.3 React Navigation 最小栈 ​

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

示意结构：

jsx
import { NavigationContainer } from '@react-navigation/native'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import { View, Text, Button } from 'react-native'

const Stack = createNativeStackNavigator()

function Home({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home</Text>
      <Button title="Go Detail" onPress={() => navigation.navigate('Detail')} />
    </View>
  )
}

function Detail() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Detail</Text>
    </View>
  )
}

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

验收：Home → Detail → 系统返回键 / 手势返回正常。

3.4 与 uni-app 页面栈对照 ​

uni-app / 小程序React Navigation
路由表pages.json 声明式JS 里注册 Screen
跳转uni.navigateTo 等navigate / push / goBack
TabtabBar 配置@react-navigation/bottom-tabs 等

能口述「配置式页面栈 vs 导航库组合」即可，不必背 API。

4. 踩坑与取舍 ​

  1. 用 div / 任意 npm Web 包：多数直接不可用；选 RN 生态或支持 RN 的库。
  2. 样式当完整 CSS 写：没有级联选择器那一套；用 style 对象与组件组合。
  3. 环境没配完就怪框架：Android SDK / 模拟器问题占入门失败大半——先跟官方 Environment Setup。
  4. 一上来就裸 RN + 原生改工程：Expo 先验证产品假设往往更快。
  5. 和 Capacitor 比「谁更好」：一个是 WebView 复用 Web，一个是原生控件；场景不同（见 08 复盘）。

5. 验收清单 ​

  • [ ] 本机或真机跑通 Hello World（Expo 或官方 CLI 任一）
  • [ ] 搭好两页 Stack，能前进返回
  • [ ] 写出至少 4 条 Web/uni-app ↔ RN 对照笔记
  • [ ] 能口述：RN 为什么不是「套壳小程序」也不是 Capacitor
  • [ ] （可选）加一个 Bottom Tabs 感受多导航器嵌套

6. 下一步 ​

→ 08 · RN 原生模块、打包与多端总复盘

参考链接 ​