# 基础脚手架

**Repository Path**: scyurui/Basic

## Basic Information

- **Project Name**: 基础脚手架
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-07-26
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Basic 1.0-beta

此项目致力于构建一套最基础，最精简，可维护的 react-native 项目，适用于团队合作开发 React Native 项目。我们知道 react-native init 出来的项目只是一个最简单的DEMO，距离开发企业级项目还差很远，所以我基于官方的DEMO，还有一些开源的项目代码，基于他们的基础之上，搭建了一个基础的脚手架。此项目虽然还不够完善，但是以此为基础足可以搭建一个大型项目！


#### 涉及主要技术


1.项目主架构:
```
  react-native,
  react-navigation,
  axios
```

2.自动化工程部分
```
  eslint,
```

#### 项目初始化

请完全按照以下步骤启动项目

```
cd Basic

yarn install

react-native run-android
```

**特别注意** 目前 npm5 存在安装新库时会删除其他库的问题，导致项目无法正常运行。请尽量使用 yarn 代替 npm 操作；


---

#### 集成的功能

一：
添加启动屏

（修改启动图片，请覆盖android/app/src/mian/res/drawable-hdpi、drawable-ldpi等多个文件夹下文件）

二：
[添加 icons](https://oblador.github.io/react-native-vector-icons/)

三：抛弃官方fetch网络请求方法，改用最新axios方法，并进行了特殊封装。

四：集成阿里官方的UI组件ant-design。

五：集成了swiper幻灯片图片切换。

六：点击两次才能退出应用。

#### 后期考虑集成的功能

一：状态管理器，Redux 或者 DVA.js

**项目结构**

```
├── README.md                   // help
├── app                         // 项目开发目录
│   ├── assets                  // 静态文件目录
│   │    ├── images             // 项目图片目录，可目录下再细分文件夹
│   │    ├── public             // 公用图片目录
│   ├── components              // 通用组件
│   │    ├── widget             // 通用基础模块
│   ├── config                  // 通用配置
│   ├── plugin                  // 对工具插件的封装
│   ├── router                  // 路由配置目录
│   │    └── index.js           // 路由入口文件，默认配置为Desk为首页
│   │    └── list.js            // 路由列表,新路由需在这里注册
│   │    └── drawer.js          // 侧边栏菜单
│   │    └── bottomTab.js       // 底部tab切换
│   ├── services                // 网络请求
│   ├── styles                  // 对样式的一些封装
│   │    └── attribute.js       // 常用属性扩展
│   │    └── common.js          // 全局通用布局
│   │    └── index.js           // 入口文件
│   │    └── variable.js        // 全局css变量
│   ├── view                    // 项目视图层各文件目录
│
├── ios                         // ios原生部分
├── index.js                    // 项目注册入口文件
├── android                     // android原生部分
├── node_modules                // 项目依赖包
├── __test__                    // 自动化测试
├── package.json                // 项目配置信息
├── .editorconfig               // 统一不同编辑器配置
├── .eslintrc                   // 代码校验规则配置
└── yarn.lock                   // 依赖的版本信息管理
```


### 依赖库

    1. react-navigation: 是官方主推的导航库，支持ios和安卓
    2. @ant-design/react-native：阿里的一套UI组件
    3. axios:  网络请求库
    4. lodash:  模块化、高性能的 JavaScript 实用工具库
    5. moment:  日期处理类库 
    6. react-native-splash-screen 启动页
    7. react-native-swiper 幻灯片切换
    8. react-native-vector-icons 图标库

### 可选用的组件库

     1. react-native-elements 外国人搞的一个UI组件库，星星多，可选用
     2. react-native-image-picker 图片选择上传，可调起手机相册API的库
     3. react-native-camera 扫描二维码
     4. react-native-video 视频
     5. react-native-video-processing 视频编辑，调整，滤镜
     6. react-native-webview 打开网页
     7. React-Native-Wechat 调用微信相关，比如分享，登录，支付
     8. react-native-contacts 访问通讯录
     9. react-native-fs 访问本地系统文件
     10.react-native-maps 地图
     11.react-native-scrollable-tab-view 可滚动Tab
     12.react-native-side-menu 侧栏
     13.react-native-gifted-chat 聊天
     14.react-native-baidu-map 百度地图
     15.react-native-charts-wrapper 图表