React Native Boilerplate 项目安装指南-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00989/article/details/148506182

React Native Boilerplate 项目安装指南

react-native-boilerplate A React Native template for building solid applications 🐙, using JavaScript 💛 or Typescript 💙 (you choose). 项目地址: https://gitcode.com/gh_mirrors/re/react-native-boilerplate

前言

React Native Boilerplate 是一个开箱即用的 React Native 项目模板，它集成了许多现代开发中常用的工具和最佳实践。本文将详细介绍如何正确安装和初始化这个项目模板，帮助开发者快速搭建 React Native 开发环境。

环境准备

在开始之前，请确保您的开发环境满足以下基本要求：

Node.js：建议安装最新的 LTS 版本
npm/yarn：包管理工具
Java Development Kit (JDK)：Android 开发需要
Xcode：macOS 用户开发 iOS 应用必备
Android Studio：Android 开发环境
Watchman：推荐 macOS 和 Linux 用户安装

这些环境要求与官方 React Native 开发环境配置一致。如果您尚未配置这些环境，建议先完成基础环境的搭建。

项目初始化

使用以下命令可以快速创建一个基于 React Native Boilerplate 的新项目：

npx @react-native-community/cli@latest init MyApp --template @thecodingmachine/react-native-boilerplate

这个命令会执行以下操作：

创建一个名为 "MyApp" 的新目录
下载最新的 React Native 版本
应用 React Native Boilerplate 模板
自动安装所有依赖项

技术栈选择

在安装过程中，系统会提示您选择是否使用 TypeScript：

📘 Using typescript ? (Y/n)

这里有几个关键点需要注意：

选择 Y 会配置 TypeScript 开发环境，适合希望使用类型检查的项目
选择 n 则会使用纯 JavaScript 开发环境
即使初始选择了 JavaScript，后期也可以手动添加 TypeScript 支持

项目启动

完成初始化后，您可以按照以下步骤运行项目：

启动 Metro 打包器：
```
yarn start
```
这个命令会启动开发服务器，保持这个终端窗口运行。
运行应用：在另一个终端窗口中，根据目标平台执行相应命令：
- iOS:
```
yarn ios
```
- Android:
```
yarn android
```
注意：运行 iOS 应用需要 macOS 系统和 Xcode，Android 应用则需要配置好 Android 开发环境。

常见问题解决

依赖安装失败：
- 尝试清除缓存：yarn cache clean
- 删除 node_modules 后重新安装：rm -rf node_modules && yarn install
iOS 构建问题：
- 确保 CocoaPods 已安装并更新：cd ios && pod install
Android 连接问题：
- 确认 Android 模拟器已启动或设备已连接
- 检查 ADB 设备列表：adb devices

项目结构说明

React Native Boilerplate 初始化后会创建以下主要目录结构：

src/：主要源代码目录
- components/：可复用组件
- screens/：应用页面
- services/：业务逻辑和服务
- utils/：工具函数
android/：Android 平台特定代码
ios/：iOS 平台特定代码
__tests__/：测试文件

结语

通过 React Native Boilerplate，开发者可以跳过繁琐的初始配置，直接进入业务逻辑开发。这个模板已经集成了许多现代 React Native 开发中常用的工具和最佳实践，包括但不限于状态管理、导航、国际化等解决方案。按照本文的安装指南，您应该能够顺利启动您的第一个基于此模板的 React Native 项目。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考