# rn-cli **Repository Path**: jslinLink/rn-cli ## Basic Information - **Project Name**: rn-cli - **Description**: 类似一个脚手架的工具 - **Primary Language**: JavaScript - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 2 - **Forks**: 0 - **Created**: 2018-09-05 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # rn-cli #### 项目介绍 类似一个脚手架的工具 此项目致力于构建一套基础，简单，可维护的 适配我司的react-native项目。可在此基础上搭建项目，封装了基础架构，基础组件，以及各种交互等；可快速进行项目搭建，开发。 # 涉及主要技术 - 1. 项目主要架构 * react native * react-navigation * redux - 2. 自动化工程部分 eslint # 体验 Android 手机用户可在附件中下载包，进行体验 给出你宝贵意见~ # 项目初始化 ``` 基于react-native-cli npm install -g react-native-cli or yarn global react-native-cli 使用git clone git clone https://gitee.com/jslinLink/rn-cli.git cd rn-cli npm install or yarn install 启动node服务 npm start 运行 android 项目 npm run android 运行 ios 项目 npm run ios ``` # 如何更改包名 此项目并没有真正意义上实现脚手架工具，只是实现一个npm包管理，具体到搭建项目 更改包名可参考：react-native-rename https://github.com/junedomingo/react-native-rename # 项目相关演示 ![pan.gif](https://upload-images.jianshu.io/upload_images/4731495-c16e3cb72a2b0b41.gif?imageMogr2/auto-orient/strip) ![ios效果图](https://upload-images.jianshu.io/upload_images/4731495-6ac326294de7b5fd.gif?imageMogr2/auto-orient/strip) ![](https://upload-images.jianshu.io/upload_images/4731495-ba7d15d1fe8436ea.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/300) ![](https://upload-images.jianshu.io/upload_images/4731495-e76fadff3be91376.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/300) ![](https://upload-images.jianshu.io/upload_images/4731495-e7c180b6664a6efd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/300) ![](https://upload-images.jianshu.io/upload_images/4731495-613c7c3e7e59c340.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/300) ![](https://upload-images.jianshu.io/upload_images/4731495-ca4ba5916e6b69de.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/300) ![](https://upload-images.jianshu.io/upload_images/4731495-d0ee757ee3693558.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/300) ![](https://upload-images.jianshu.io/upload_images/4731495-f013c8d8dcffcb9e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/300) ![](https://upload-images.jianshu.io/upload_images/4731495-9fbbb509966672aa.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/300) ![](https://upload-images.jianshu.io/upload_images/4731495-4a081055e138bd29.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/300) # 目录结构 ``` ├── README.md ├── __tests__ ├── android ├── app.json ├── index.android.js // android entry ├── index.ios.js // ios entry ├── ios ├── package.json ├── src │   ├── actions │   ├── components // 页面组件 │   ├── constants // 常量，原则上不能存在魔法字符串，公用/重要常量在此文件夹下统一定义 │   │   ├── ActionTypes.js // ActionTypes │   │   ├── Api.js // 接口路径 │   │   ├── Config.js // 项目参数 │   │   ├── Global.js // 全局常量 │   │   └── Style.js // 基础UI定义 │   ├── images │   ├── main.js // 首页入口，底部导航配置，名字取的不好？ │   ├── pages // 页面入口, 统一使用SafeAreaView作为顶层组件 │   ├── reducers │   ├── router.js // router config , pages下的所有文件都要在此定义 │   ├── store │   └── utils // 工具集合，公用方法都需要整理到这里 │   ├── CheckFormat.js // precommit hook 调用的检查方法 │   ├── Form.js // 表单的正则校验 │   ├── Request.js // 请求 │   ├── View.js // 页面内调用比较多的UI方法 │   └── lib ``` # 组件使用 请参考 Demo 示例 # 组件库 # 编码规范 为避免 React Native: TypeError: Network request failed 在调用接口的时候，为避免网络请求失败导致闪退，渲染数据的时候，一定要在状态为200的情况下，填充 不要出现 直接 res.data 的情况 # 原生端集成 持续更新中： - 热更新 - 推送 - 统计 - 包加固等