# expo-firebase
**Repository Path**: chenbool/expo-firebase
## Basic Information
- **Project Name**: expo-firebase
- **Description**: Expo + Firebase（使用 JS SDK）项目的方式
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-21
- **Last Updated**: 2026-04-21
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# expo-firebase-starter 🔥
[](https://expo.dev/client)
这是一个快速启动 Expo + Firebase（使用 JS SDK）项目的方式。它包含：
- 基于 Expo SDK `50`
- 使用 `react-navigation` 6.x.x 进行导航
- Firebase JS SDK v9
- 使用 Firebase 作为邮箱认证的后端
- 自定义可复用组件
- 用于切换密码输入框可见性的自定义 Hook
- 使用 Formik 处理服务器错误
- 使用 Formik 和 yup 构建的登录、注册和密码重置表单
- 显示/隐藏密码字段可见性 👁
- 使用 Context API 和 Firebase 的 `onAuthStateChanged` 处理程序来检查用户认证状态的自定义 Provider
- 使用 Firebase 邮箱方法处理忘记密码重置
- 使用 [Expo Vector Icons](https://icons.expo.fyi/)
- 使用 [KeyboardAwareScrollView](https://github.com/APSL/react-native-keyboard-aware-scroll-view) 包处理键盘出现并自动滚动到聚焦的 TextInput
- 使用 `dotenv` 和 `expo-constants` 包管理环境变量（防止在公共仓库中暴露）
- 所有组件现在都是函数组件并使用 [React Hooks](https://reactjs.org/docs/hooks-intro.html)
## 安装
1. 使用 Firebase 启动模板创建新项目。
```bash
npx create-react-native-app --template https://github.com/expo-community/expo-firebase-starter
```
2. 将文件 `.env.example` 重命名为 `.env`
3. 使用您自己的配置更新 `.env`，例如：
```shell
# 使用前将此文件重命名为 ".env"
# 将 XXXX 替换为您自己的 Firebase 配置密钥
API_KEY=XXXX
AUTH_DOMAIN=XXXX
PROJECT_ID=XXXX
STORAGE_BUCKET=XXXX
MESSAGING_SENDER_ID=XXXX
APP_ID=XXXX
```
## 运行项目
要启动开发服务器并运行您的项目：
```
npx expo start
```
除了使用 Expo Go，如果您要构建的不仅仅是业余项目或原型，请确保 [创建开发版本](https://docs.expo.dev/develop/development-builds/introduction/)。您可以 [本地编译您的项目](https://docs.expo.dev/guides/local-app-development/#local-builds-with-expo-dev-client) 或 [使用 EAS](https://docs.expo.dev/develop/development-builds/create-a-build/)。
要本地编译您的应用，请运行：
```
# 构建原生 Android 项目
npx expo run:android
# 构建原生 iOS 项目
npx expo run:ios
```
## 文件结构
```shell
Expo Firebase Starter
├── assets ➡️ 所有静态资源，包括应用图标
├── components ➡️ 所有可复用的表单屏幕 UI 组件
│ └── Button.js ➡️ 使用 Pressable 的自定义按钮组件，带有两种变体并处理透明度
│ └── TextInput.js ➡️ 支持左右图标的自定义文本输入组件
│ └── Icon.js ➡️ 图标组件
│ └── FormErrorMessage.js ➡️ 显示来自 Firebase 的服务器错误的组件
│ └── LoadingIndicator.js ➡️ 加载指示器组件
│ └── Logo.js ➡️ Logo 组件
│ └── View.js ➡️ 支持安全区域视图的自定义视图组件
├── hooks ➡️ 所有自定义 Hook 组件
│ └── useTogglePasswordVisibility.js ➡️ 在确认密码字段上切换 TextInput 组件密码可见性的自定义 Hook
├── config ➡️ 所有配置文件
│ └── firebase.js ➡️ 使用 firebaseConfig 和 auth 初始化 Firebase 的配置文件
│ └── images.js ➡️ 引入图片资源，应用中的可复用值
│ └── theme.js ➡️ 默认颜色集合，应用中的可复用值
├── providers ➡️ 使用 React Context API 的所有自定义 Provider
│ └── AuthenticatedUserProvider.js ➡️ 登录时共享 Firebase 用户对象的认证用户上下文组件
├── navigation
│ └── AppStack.js ➡️ 受保护的路由，如首页屏幕
│ └── AuthStack.js ➡️ 用户未认证时的路由，如登录屏幕
│ └── RootNavigator.js ➡️ 基于 Firebase 用户登录状态在认证屏幕和应用屏幕之间切换
├── screens
│ └── ForgotPassword.js ➡️ 忘记密码屏幕组件
│ └── HomeScreen.js ➡️ 受保护的路由/屏幕组件
│ └── LoginScreen.js ➡️ 登录屏幕组件
│ └── SignupScreen.js ➡️ 注册屏幕组件
├── App.js ➡️ 移动应用的入口点，在此包装所有 Provider
├── app.config.js ➡️ Expo 配置文件
└── babel.config.js ➡️ Babel 配置（应使用 `babel-preset-expo`）
```
## 屏幕
主要屏幕：
- 登录
- 注册
- 忘记密码
- 首页（最基本）带退出按钮
## 开发版本和 React Native Firebase 库
本项目使用 Firebase JS SDK，它不支持所有服务（如 Crashlytics、Dynamic Links 和 Analytics）。但是，您可以通过 [创建开发版本](https://docs.expo.dev/develop/development-builds/introduction/) 在 Expo 项目中使用 `react-native-firebase` 库。
这两个库都可以满足不同的项目需求。要了解使用 Expo 构建应用时使用 Firebase JS SDK 和 React Native Firebase 库之间的区别，请参阅 Expo 官方文档的以下部分：
- [何时使用 Firebase JS SDK](https://docs.expo.dev/guides/using-firebase/#when-to-use-firebase-js-sdk)
- [何时使用 React Native Firebase](https://docs.expo.dev/guides/using-firebase/#when-to-use-react-native-firebase)
---
由 [@amanhimself](https://twitter.com/amanhimself) 用 💜 构建