React Native Boilerplate

一个开箱即用的 React Native 工程脚手架

Features

• Typescript 支持
• React Hooks
• React Query 管理异步请求数据状态&缓存 🚀
• Swagger Api Codegen Api 接口 ts 代码生成，可更好结合 react-query 使用，不写请求代码
• Zustand 基于 hooks 的状态管理
• React Navigation V6 支持 Authentication flow（身份验证流程）和主题
• React Native Gesture Handler
• NativeBase UI 组件库
• React Native Vector Icons
• Jest
• Eslint (Airbnb config)
• Flipper Facebook 开源的 debugger 工具，功能强大。官网下载安装包安装后即可使用。

How this looks

Prerequisites

• Node v12+
• Yarn
• 更多看官方环境介绍

Folder structure

├── src
    ├── assets          # 本地静态资源
    ├── components      # 业务通用组件
    ├── config          # 配置,包含icon,styles等
    ├── hooks           # hooks
    ├── lib             # 封装工具类lib，或第三方lib，区别于utils
    ├── navigation      # 路由导航
    ├── rh              # @roothub/cli api 生成文件夹，包含网络请求和生成的接口定义类
    ├── screens         # 业务页面
    ├── services        # 服务封装，auth 或 react-query等
    ├── store           # zustand 状态管理文件
    └── utils           # 工具函数库，通用函数

Getting Started

根目录 .env.[environment] 文件，代表对应环境下的环境变量配置

1. 克隆项目, git clone https://github.com/RootLinkFE/react-native-template.git <your project name>
2. 切换到项目根目录, cd <your project name>
3. 删除 .git 文件夹, rm -rf .git
4. 使用插件 React Native Rename 重命名项目名称 $ npx react-native-rename <newName>，也可以快速修改 bundleId
5. 执行 yarn 安装依赖
6. 如果是 ios，执行 yarn pod
7. 执行 yarn start 启动 packager
8. 链接你的手机（或者虚拟机启动）

• On Android:
  • 执行 yarn android 或 在 Android Studio 中启动
• On iOS:
  • 执行yarn ios 使用 Xcode ios/YourReactProject.xcworkspace打开，点击 Run

9. 完毕!!!

更多查看 更多文档

TODO

• 主题切换
• DEMO 页面示例
• 一些常用组件
• 组件测试用例
• Swagger api 接口代码生成，改进成配置化，更新配置和执行配置命令就可以同步更新创建接口定义代码

Contributing

欢迎 PR 共建