react native 学习2025.7.19

推荐项目Shaun (Net Ninja)

1、创建react native项目

注意项目路径一定不要有中文
npx create-expo-app@latest
模拟器使用expo go（安卓手机也可以使用）
vs code 插件es7+react，这个插件会提供代码片段（rnfes）

2、Expo Router的使用

• expo router文档
• 安装工具npx expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants expo-status-bar
• RN跳转标签<Link href="/about">About Page</Link>

3、布局文件以及导航

_layout.jsx布局文件

import { StyleSheet, Text, View } from 'react-native'
import { Slot, Stack } from 'expo-router'
import React from 'react'

const Rootlayout = () => {
    return (
        <Stack screenOptions={{
            headerStyle: { backgroundColor: "#ddd" },
            headerTintColor: "#fff"
        }}>
            <Stack.Screen name="index" options={{ title: "Home" }} />
            <Stack.Screen name="about" options={{ title: "About", headerShown: false }} /> 
        </Stack>
    )
}

export default Rootlayout

const styles = StyleSheet.create({})

React Native + Expo 全面知识总结 🚀

一份从项目创建到打包上线的 React Native + Expo 全流程知识文档
适用于前端开发者快速上手移动端跨平台开发。

---

📑 目录

• 一、React Native 与 Expo 概述
• 二、开发环境搭建
• 三、创建新项目
• 四、项目结构说明
• 五、常用命令汇总
• 六、React Native 基础知识
  • 1️⃣ 核心组件
  • 2️⃣ 样式与布局
  • 3️⃣ 导航与页面切换
• 七、Expo 常用模块
• 八、调试与开发技巧
• 九、打包与发布
• 🔟 常见问题 FAQ
• 十一、推荐学习资源
• 十二、总结

---

一、React Native 与 Expo 概述

📱 React Native 是什么

React Native 是一个基于 React + JavaScript 构建原生移动应用的框架。
它允许使用前端技术开发 iOS 和 Android 原生应用。

🚀 Expo 是什么

Expo 是一套 React Native 的增强工具链，简化了开发、调试和打包。

Expo 优势：

• 零配置快速启动
• 集成调试与构建工具
• 支持 OTA（热更新）
• 一键打包上传 App Store / Google Play

---

二、开发环境搭建

1️⃣ 安装 Node.js 与 npm

node -v  # >= 18.x
npm -v   # >= 9.x

建议使用 nvm 管理 Node 版本。

2️⃣ 安装 Expo CLI

npm install -g expo-cli
# 或使用新版本命令
npx create-expo-app@latest

3️⃣ 安装 Expo Go 调试工具

• iOS: App Store 搜索 “Expo Go”
• Android: Google Play 搜索 “Expo Go”

---

三、创建新项目

1️⃣ 创建项目

npx create-expo-app myApp

选择模板：

• blank：空模板
• blank (TypeScript)：带 TypeScript
• tabs：带导航模板

2️⃣ 启动项目

cd myApp
npm start
# 或
npx expo start

打开浏览器中的 Metro Bundler 控制台，用手机 Expo Go 扫描二维码即可预览。

---

四、项目结构说明

myApp/
│
├── App.js                # 应用入口
├── app.json              # Expo 配置文件
├── package.json          # npm 依赖与脚本
├── babel.config.js       # Babel 编译配置
├── assets/               # 静态资源（图片、字体）
├── node_modules/         # 依赖包
└── screens/              # 页面组件
    ├── HomeScreen.js
    ├── DetailScreen.js
    └── ...

---

五、常用命令汇总

命令	功能
npm start	启动 Expo 开发服务器
npm run android	启动 Android 模拟器
npm run ios	启动 iOS 模拟器
npm run web	启动 Web 预览
expo prebuild	生成原生目录（Bare Workflow）
expo build:android	构建 Android APK/AAB 包
expo build:ios	构建 iOS IPA 包
expo publish	发布 OTA 更新

---

六、React Native 基础知识

1️⃣ 核心组件

组件	说明
View	容器组件，类似 div
Text	显示文字内容
Image	显示图片
ScrollView	可滚动视图
TextInput	输入框
TouchableOpacity	可点击容器
FlatList	高性能列表

示例：

import { View, Text, TouchableOpacity } from 'react-native';

export default function App() {
  return (
    <View style={{ padding: 20 }}>
      <Text>Hello React Native!</Text>
      <TouchableOpacity onPress={() => alert('Clicked!')}>
        <Text>Click Me</Text>
      </TouchableOpacity>
    </View>
  );
}

---

2️⃣ 样式与布局

import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello World!</Text>
    </View>
  );
}

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

---

3️⃣ 导航与页面切换

安装导航库：

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

示例代码：

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Home from './screens/Home';
import Detail from './screens/Detail';

const Stack = createNativeStackNavigator();

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

---

七、Expo 常用模块

模块	功能
expo-image-picker	图片选择
expo-camera	调用相机
expo-location	获取地理位置
expo-notifications	推送通知
expo-sqlite	本地数据库
expo-file-system	文件系统操作
expo-sharing	文件分享
expo-linear-gradient	渐变背景

安装模块示例：

npx expo install expo-image-picker

---

八、调试与开发技巧

✅ 热重载（Hot Reload）

修改代码自动刷新界面。

🧠 调试工具

• Chrome DevTools
• React Developer Tools
• Expo DevTools（默认启动在 localhost:19002）

⚙️ 环境变量管理

npm install react-native-dotenv

.env 文件：

API_URL=https://api.example.com

---

九、打包与发布

1️⃣ 登录 Expo

expo login

2️⃣ 构建 Android 包

expo build:android
# 或使用新命令
eas build -p android

3️⃣ 构建 iOS 包

expo build:ios
# 或
eas build -p ios

4️⃣ 发布 OTA 热更新

expo publish

5️⃣ 打包 Web 版本

npm run web

---

🔟 常见问题 FAQ

问题	解决方案
启动失败（Bundler 卡住）	清理缓存：expo start -c
模拟器无法连接	检查 Android Studio 是否运行模拟器
构建失败	运行 eas build:configure 重新初始化
图片不显示	确认使用 require() 导入路径

---

十一、推荐学习资源

• 📘 Expo 官方文档

• 📘 React Native 官方文档

• 🧩 Expo Snack 在线预览

• 🔧 推荐库：

  • react-native-paper
  • react-native-vector-icons
  • expo-router
  • react-query
  • react-native-gesture-handler

---

十二、总结 ✨

优势	说明
🚀 快速启动	零配置创建项目
🧩 功能丰富	集成常用模块
🔄 热更新	支持 OTA 与快速调试
🌍 多端支持	iOS / Android / Web 一体化构建

✅ 推荐路线：
初学者：使用 create-expo-app 快速入门
项目中后期：可使用 expo prebuild 转为裸工作流（Bare Workflow）以扩展原生功能。

---

🧠 作者建议

React Native + Expo 是前端开发者迈向移动端最快的通道。
掌握 Expo 基础 + React Navigation + TypeScript = 快速构建跨平台应用！