React Native 起步模板使用指南

React Native 起步模板使用指南

react-native-boilerplate 🚀 Type Based Architecture for developing React Native Apps using react, redux, sagas and hooks with auth flow 项目地址: https://gitcode.com/gh_mirrors/rea/react-native-boilerplate

本指南旨在帮助开发者快速理解并启动基于 Victor Kvarghese's 的 React Native Boilerplate 项目。该模板采用类型化架构，适用于构建中小型应用，并集成了React、Redux、Saga和Hooks等技术栈，还带有认证流程。

1. 目录结构及介绍

React Native Boilerplate 的目录结构精心设计，便于维护和扩展：

• app: 应用的核心代码存放地，包括组件、屏幕、服务等。
  • json: 存放应用相关的JSON配置。
  • screens: 包含所有屏幕组件，每个屏通常对应一个React组件。
  • services: 存放应用的服务逻辑，如API调用、数据管理等。
• babel.config.js: Babel的配置文件，用于编译源码至JavaScript兼容当前环境版本。
• bundle: 编译后的代码包，一般在生产环境中使用。
• editorconfig, .eslint.js, .prettierrc.js: 代码风格配置文件，保证团队间编码的一致性。
• gitignore: Git忽略文件列表，避免将特定类型的文件提交到版本库。
• package.json, yarn.lock: 项目依赖和锁定文件，确保跨环境一致性。
• tsconfig.json: TypeScript编译器的配置文件。
• ios 和 android: 分别是iOS和Android平台的原生代码和配置。
• *.lock 文件：记录具体安装的依赖版本，保障环境复现性。

2. 项目的启动文件介绍

主要的启动点在于脚本命令，而不是单一文件。通过以下命令进行项目初始化和运行：

• 初始化项目依赖：

  yarn
  

• 开始开发服务器：

  yarn start
  

  这将启动Metro Bundler，允许你在设备或模拟器上运行应用。

• 项目启动前可能需要执行重命名操作，以适应你的项目名（如果从模板克隆）：

  npx react-native-rename "你的项目名"
  

实际运行应用需进入对应的平台目录执行命令：

• 对于Android：

  react-native run-android
  

• 对于iOS，你需要打开Xcode工作空间然后运行：

  open ios/你的项目名.xcworkspace
  

3. 项目的配置文件介绍

主要配置文件概览

• app.json: React Native应用的元数据配置，包括应用的名称、图标、颜色等，以及一些特定于React Native的配置选项。
• metro.config.js: 控制React Native打包过程的配置文件，影响如何处理模块和资源。
• react-native-config.js (如果存在): 环境变量配置，支持不同环境下的配置切换。
• redux/*: 包括store.js和相关中间件配置，定义了Redux的状态管理和流处理方式。
• .env.* 文件: 根据环境（如.env.development, .env.production）设置环境变量。

此模板特别强调了利用Redux进行状态管理，并通过Redux Saga来处理异步操作，其配置分散在多个地方，通常是通过reducers, sagas, 和 store的组织来实现复杂应用逻辑的解耦。

通过上述指南，开发者可以高效地理解和上手这个React Native的起步项目，迅速投入开发工作中。记得在深入开发之前熟悉各部分的配置细节，以充分利用模板提供的特性。

react-native-boilerplate 🚀 Type Based Architecture for developing React Native Apps using react, redux, sagas and hooks with auth flow 项目地址: https://gitcode.com/gh_mirrors/rea/react-native-boilerplate