react native 使用 Expo 的结构模版

一、Expo 是什么

Expo 是 React Native 提供的一整套开发工具和服务，让你在不配置原生开发环境（如 Xcode、Android Studio） 的情况下就能快速开发、预览和构建移动应用。

1. Expo 是什么？

Expo = React Native + 工具链

功能	说明
快速启动项目	不需要配置 Xcode、Android Studio
一键预览	使用 Expo Go App 扫码直接在手机上预览
构建 App 包	可以构建出 Android（.apk/.aab）和 iOS（.ipa）安装包
丰富 API	提供相机、定位、传感器等封装好的功能模块
OTA 更新	支持热更新，无需用户重新下载 App

2. Expo 的使用流程

第一步：安装 CLI (一般不需要)

npm install -g expo-cli

推荐使用 npx create-expo-app@latest，你通常不需要安装 expo-cli 全局包，除非你有一些特殊需求（比如使用旧项目或 expo publish）。

 

第二步：创建项目

npx create-expo-app my-app
cd my-app
npm start

第三步：运行项目

npm start

它会打开一个开发页面（Metro bundler），显示一个二维码。

• 在手机上安装「Expo Go」App（App Store / Google Play）

• 扫描二维码，即可在真机预览项目！

3. 使用内置功能模块（免原生配置）

比如使用摄像头：

import { Camera } from 'expo-camera';

const Component = () => {
  const [permission, requestPermission] = Camera.useCameraPermissions();
  // ...
};

Expo 提供了很多实用的功能模块，例如：

模块	功能
expo-camera	调用摄像头
expo-location	获取地理位置
expo-media-library	访问相册
expo-image-picker	图片选择
expo-notifications	推送通知
expo-sensors	陀螺仪、加速度计等

4. 构建 APK / IPA 安装包

如果你开发完成想生成安装包，可以使用 Expo 的构建服务：

npx expo export
npx expo build:android    # 旧版
npx expo build:ios

# 或者用 EAS 构建（推荐）
npx expo install eas-cli
npx eas build -p android  # 或 ios

你需要绑定 Expo 账号，Expo 会在云端帮你构建安装包。

5. 适合用 Expo 的场景

✅ 适合：

• 不熟悉原生开发（Kotlin / Swift）

• 希望快速上线一个通用 App

• 开发人员主要是 Web 前端

• 对原生能力要求不高

❌ 不适合：

• 需要大量自定义原生代码（如蓝牙、底层音视频）

• 已有复杂原生 App 需要集成 React Native

✅ 总结一句话：

Expo 是 React Native 的高效开发套件，让你像开发 Web 应用一样开发 App，不需要配置 Xcode/Android Studio，支持扫码预览、热更新和云构建，是 Web 前端开发 App 的首选入门方式。

二、Expo 项目的结构模版

📁 项目结构（含 Tab 导航 + 登录鉴权）

my-expo-app/
├── assets/                     # 静态资源（图片、字体等）
├── components/                 # 通用组件（如自定义按钮）
│   └── MyButton.js
├── screens/                    # 页面组件
│   ├── HomeScreen.js
│   ├── ProfileScreen.js
│   ├── LoginScreen.js
│   └── SplashScreen.js        # 启动加载页（可选）
├── navigation/                 # 路由配置
│   ├── AppNavigator.js        # 主应用（登录后）
│   ├── AuthNavigator.js       # 登录页导航
│   └── RootNavigator.js       # 判断是否登录
├── context/                    # 全局状态（用户登录状态）
│   └── AuthContext.js
├── App.js                      # 入口文件
├── app.json
├── babel.config.js
└── package.json

🔐 鉴权流程结构说明

登录前：

• 走 AuthNavigator，只渲染 Login 页面。

登录后：

• 走 AppNavigator，使用底部 Tab 导航，进入主应用页面（如首页、我的页面等）。

用户状态判断逻辑：

• 由 RootNavigator.js 读取 AuthContext 中是否登录，决定显示哪个导航。

🚀 示例核心代码

App.js

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import RootNavigator from './navigation/RootNavigator';
import { AuthProvider } from './context/AuthContext';

export default function App() {
  return (
    <AuthProvider>
      <NavigationContainer>
        <RootNavigator />
      </NavigationContainer>
    </AuthProvider>
  );
}

context/AuthContext.js

import React, { createContext, useState } from 'react';

export const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null); // user 为 null 表示未登录

  return (
    <AuthContext.Provider value={{ user, setUser }}>
      {children}
    </AuthContext.Provider>
  );
};

navigation/RootNavigator.js

import React, { useContext } from 'react';
import { AuthContext } from '../context/AuthContext';
import AppNavigator from './AppNavigator';
import AuthNavigator from './AuthNavigator';

export default function RootNavigator() {
  const { user } = useContext(AuthContext);
  return user ? <AppNavigator /> : <AuthNavigator />;
}

navigation/AppNavigator.js（Tab导航）

import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import HomeScreen from '../screens/HomeScreen';
import ProfileScreen from '../screens/ProfileScreen';

const Tab = createBottomTabNavigator();

export default function AppNavigator() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="首页" component={HomeScreen} />
      <Tab.Screen name="我的" component={ProfileScreen} />
    </Tab.Navigator>
  );
}

navigation/AuthNavigator.js

import React from 'react';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import LoginScreen from '../screens/LoginScreen';

const Stack = createNativeStackNavigator();

export default function AuthNavigator() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="登录" component={LoginScreen} />
    </Stack.Navigator>
  );
}

screens/LoginScreen.js

import React, { useContext } from 'react';
import { View, Button, StyleSheet } from 'react-native';
import { AuthContext } from '../context/AuthContext';

export default function LoginScreen() {
  const { setUser } = useContext(AuthContext);

  const handleLogin = () => {
    setUser({ name: '张三' }); // 模拟登录成功
  };

  return (
    <View style={styles.container}>
      <Button title="点击登录" onPress={handleLogin} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
});

✅ 效果

• 启动时自动判断是否登录；

• 登录成功后进入主界面（带底部 Tab）；

• 退出登录后返回登录页。

✅ 如何创建这个项目

npx create-expo-app my-expo-app
cd my-expo-app
npm install @react-navigation/native @react-navigation/native-stack react-native-screens react-native-safe-area-context react-native-gesture-handler react-native-reanimated react-native-vector-icons

创建好后把 App.js、目录结构、路由等根据上面调整即可。