beijihua-common-app-layout

北极花APP公共组件

介绍

北极花的公共组件库

软件架构

软件架构说明

• 主要分为components、api、data、database、drawer-layout、redux、sevices、utils几个模块
• 文件主要结构

├── NavigationService.ts 
├── animated
├── api (接口相关)
├── assets 
├── components 组件
├── data   初始化数据
├── database 数据库表格初始化、及增删改查等
├── drawer-layout 数据过滤方法、指南针、工具箱
├── redux 
├── sevices 本地数据存储操作
└── utils 公用工具方法集合

点击展开

├── animated
├── api
│   ├── index.ts
│   └── reqeust.ts
├── assets
│   ├── icons
│   ├── images
│   └── styles
│       └── com-style.ts
├── components
│   ├── dialog
│   │   ├── 1.sh
│   │   ├── AddSampleSquareResearchDialog.tsx
│   │   ├── CustomLocationDialog.tsx
│   │   ├── GroundDiameterDialog.tsx
│   │   ├── MainSampleSizeSettingDialog.tsx
│   │   ├── MutipleSelectDialog.tsx
│   │   ├── NumberOfPlantsDialog.tsx
│   │   ├── PlantHeightDialog.tsx
│   │   ├── ProtectionLandNameDialog.tsx
│   │   └── index.ts
│   ├── index.ts
│   ├── kits
│   │   ├── 1.sh
│   │   ├── ActionSheetPanel.tsx
│   │   ├── FloatFastWindow.tsx
│   │   ├── JDatePicker.tsx
│   │   ├── KitAreaLocaionMsg.tsx
│   │   ├── KitCheckBox.tsx
│   │   ├── KitComActionSheet.tsx
│   │   ├── KitDashBorderLine.tsx
│   │   ├── KitEmpty.tsx
│   │   ├── KitFloatBottomBtn.tsx
│   │   ├── KitFootLine.tsx
│   │   ├── KitFormGroupRow.tsx
│   │   ├── KitFormSingleRow.tsx
│   │   ├── KitImageListView.tsx
│   │   ├── KitLoadingImage.tsx
│   │   ├── KitLoadingMore.tsx
│   │   ├── KitLoadingPage.tsx
│   │   ├── KitLoadingToast.tsx
│   │   ├── KitMockListView.tsx
│   │   ├── KitPureRemarkView.tsx
│   │   ├── KitRecordLocation.tsx
│   │   ├── KitRecordVoiceSheet.tsx
│   │   ├── KitRemarkView.tsx
│   │   ├── KitResearchAreaLocationMsg.tsx
│   │   ├── KitResearchItem.tsx
│   │   ├── KitSerialNumberInputToast.tsx
│   │   ├── KitSetCustomBlockSizeToast.tsx
│   │   ├── KitVoiceMultipleRecord.tsx
│   │   ├── KitVoiceRow.tsx
│   │   ├── MapNewResearchBtn.tsx
│   │   ├── NormalActionSheet.tsx
│   │   ├── NormalHeader.tsx
│   │   ├── SelectResearchTypeToast.tsx
│   │   ├── SlopeDirectionToast.tsx
│   │   └── index.ts
│   ├── loading
│   │   ├── 1.sh
│   │   ├── LoadingKit.tsx
│   │   └── index.ts
│   ├── map-kits
│   │   ├── 1.sh
│   │   ├── CustomMapView.tsx
│   │   ├── CustomMarker.tsx
│   │   ├── GpsLocationKeepKit.tsx
│   │   ├── GpsLocationShowKit.tsx
│   │   ├── KitCompass.tsx
│   │   ├── KitSmallCompass.tsx
│   │   ├── MapTools.tsx
│   │   ├── MapViewBaseTool.tsx
│   │   ├── ResearchDataGroup.tsx
│   │   ├── ResearchMsgMapKit.tsx
│   │   └── index.ts
│   ├── tabbar
│   │   ├── 1.sh
│   │   ├── BottomNavigationBar.tsx
│   │   ├── CommonTableListScrollTabBar.tsx
│   │   ├── CommonTableTabBar.tsx
│   │   ├── HomePageTabBar.tsx
│   │   ├── LayerTabBar.tsx
│   │   ├── TabItem.tsx
│   │   └── index.ts
│   ├── task-kits
│   │   ├── 1.sh
│   │   ├── InitLocationTask.tsx
│   │   ├── InitReduxTask.tsx
│   │   ├── InitSqlite3Task.tsx
│   │   └── index.ts
│   ├── update.sh
│   └── wrappers
│       ├── 1.sh
│       ├── PageWrapper.tsx
│       ├── PurePageWrapper.tsx
├── data
│   ├── ChinesePY.ts
│   ├── ProtectedLandNameList.ts
│   └── index.ts
├── database
│   ├── DataBaseTableName.ts
│   ├── InitDataBase.ts
│   ├── Instance.ts
│   ├── SqlStatement.ts
│   └── index.ts
└── drawer-layout
├── DataFilter.tsx
├── MapTool.tsx
├── ToolBox.tsx
└── index.ts

---

安装教程

yarn add common-comments

安装相关依赖

• 以下为所需依赖

@react-native-community/async-storage  
@react-native-community/slider 
@react-navigation/native 
fengsheng-rnmaps 
lottie-react-native 
lpf 
react-native-amap-geolocation
react-native-background-timer
react-native-date-picker
react-native-easy-grid
react-native-fast-image
react-native-fs
react-native-gesture-handler
react-native-image-crop-picker
react-native-iphone-x-helper
react-native-progress
react-native-reanimated
react-native-sensors
react-native-sound
react-native-sqlite-storage
reanimated-bottom-sheet
redux
rn-fetch-blob
@react-native-community/async-storage

yarn add @react-native-community/async-storage @react-native-community/slider @react-navigation/native fengsheng-rnmaps lottie-react-native lpf react-native-amap-geolocation react-native-background-timer react-native-date-picker react-native-easy-grid react-native-fast-image react-native-fs react-native-gesture-handler react-native-image-crop-picker react-native-iphone-x-helper react-native-progress react-native-reanimated react-native-sensors react-native-sound react-native-sqlite-storage reanimated-bottom-sheet redux rn-fetch-blob @react-native-community/async-storage

使用说明

导入

• components导入 components为默认导入

因此可直接 导入 import {} from "common-comments"
例如 import {GroundDiameterDialog} from "common-comments"

• 其他公用内容导入 其他公用组件导入需指定到对应目录导入

例如:
import {} from "common-comments/NavigationService"
import {} from "common-comments/api/index"
import {} from "common-comments/data/index"
import {} from "common-comments/drawer-layout/index"
import {} from "common-comments/database/DataBaseTableName"
import {} from "common-comments/database/Instance"
import {} from "common-comments/database/SqlStatement"
import initDataBaseFunc from "common-comments/database/InitDataBase"
import localSevice from "common-comments/sevices/index"

具体使用介绍

• Dialog AddSampleSquareResearchDialog

  CustomLocationDialog

  GroundDiameterDialog

  MainSampleSizeSettingDialog

  MutipleSelectDialog

  NumberOfPlantsDialog

  PlantHeightDialog

  ProtectionLandNameDialog

---

• kits
• loading
• map-kits
• tabbar
• task-kits
• wrappers

参与贡献

1. Fork 本仓库
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request

特技

1. 使用 Readme_XXX.md 来支持不同的语言，例如 Readme_en.md, Readme_zh.md
2. Gitee 官方博客 blog.gitee.com
3. 你可以 https://gitee.com/explore 这个地址来了解 Gitee 上的优秀开源项目
4. GVP 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5. Gitee 官方提供的使用手册 https://gitee.com/help
6. Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 https://gitee.com/gitee-stars/