{"id":14974274,"url":"https://github.com/duheng/mozi","last_synced_at":"2025-04-05T03:08:47.380Z","repository":{"id":25445477,"uuid":"102708746","full_name":"duheng/Mozi","owner":"duheng","description":"此项目致力于构建一套最基础，最精简，可维护的react-native项目，支持ios，android 🌹","archived":false,"fork":false,"pushed_at":"2023-01-12T08:22:39.000Z","size":35179,"stargazers_count":518,"open_issues_count":32,"forks_count":92,"subscribers_count":19,"default_branch":"master","last_synced_at":"2025-04-05T03:08:28.955Z","etag":null,"topics":["es6","eslint","prettier-eslint","react","react-native","react-native-app","react-native-demo","react-native-demo-app","react-native-navigation","react-navigation","react-navigation-demo","react-navigation-redux","react-redux","reactjs","rnn"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/duheng.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-09-07T07:58:52.000Z","updated_at":"2024-11-08T19:41:42.000Z","dependencies_parsed_at":"2023-01-14T07:00:23.041Z","dependency_job_id":null,"html_url":"https://github.com/duheng/Mozi","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/duheng%2FMozi","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/duheng%2FMozi/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/duheng%2FMozi/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/duheng%2FMozi/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/duheng","download_url":"https://codeload.github.com/duheng/Mozi/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247280270,"owners_count":20912967,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["es6","eslint","prettier-eslint","react","react-native","react-native-app","react-native-demo","react-native-demo-app","react-native-navigation","react-navigation","react-navigation-demo","react-navigation-redux","react-redux","reactjs","rnn"],"created_at":"2024-09-24T13:50:19.238Z","updated_at":"2025-04-05T03:08:47.359Z","avatar_url":"https://github.com/duheng.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Mozi 2.0-beta\r\n\r\n[![npm](https://img.shields.io/npm/l/express.svg)](https://github.com/duheng/Mozi)\r\n[![CircleCI](https://img.shields.io/circleci/project/github/RedSparr0w/node-csgo-parser.svg)](https://github.com/duheng/Mozi)\r\n[![Codecov branch](https://img.shields.io/codecov/c/github/codecov/example-python/master.svg)](https://github.com/duheng/Mozi)\r\n\r\n此项目致力于构建一套可最基础，最精简，可维护的 react-native 项目，适用于团队合作开发 React Native 项目，我们知道 react-native init 出来的项目只是一个最简单的 demo，距离开发企业级项目还差很远，所以这套框架是我在开发中总结优化而来的，会提供群里关注度高的问题的解决方案以及 demo，此项目虽然还不够完善，但是以此为基础足可以搭建一个大型项目：\r\n\r\n##升级 2.1-beta 说明：\r\n\r\n```\r\n  1- 增加auth分枝，包含登录功能，个人中心\r\n```\r\n\r\n##升级 2.0-beta 说明：\r\n\r\n```\r\n  1- 升级react-native到0.55.4；升级了react-navigation到2.5.5；这快改动比较大，如果你自己的项目有不会升级react-navigation的可以参考一下config.js\r\n  2- 增加了消息推动和codepush，和jpush，目前安卓版本有效，ios因没有证书还没测试\r\n  3- 删除了redux-saga，删除的原因并不是因为它不优秀，我个人觉得它很优秀，但是根据大多数工程师反馈不会用saga。而我个人觉得它是一个锦上添花的模块，并不是一个必须的，为了适应大多数工程师的使用习惯改回了原始版本。 注：（大家有喜欢用saga的也可以用 mozi1.0 的分枝）\r\n  4-master分枝是2.0-beta版本，还没有完善，大家要用稳定版本的也可以用mozi1.0分枝\r\n  5- 这个版本集成了codepush和jpush，因为我觉得这是每个成熟的产品都必须要有的功能，大家换成自己申请的key就可以了；如果觉得不需要某个我集成的功能可以直接 unlink就OK了；比如：react-native unlink react-native-code-push 这个模块\r\n```\r\n\r\n#### 涉及主要技术\r\n\r\n```\r\n1.项目主架构:\r\n\r\n  react-native,\r\n  react-navigation,\r\n  redux,\r\n  redux-saga,\r\n\r\n2.自动化工程部分\r\n\r\n  eslint,\r\n  prettier,\r\n  editorconfig,\r\n  pre-commit\r\n```\r\n\r\n#### 项目初始化\r\n\r\n请完全按照以下步骤启动项目，请完全按照以下步骤启动项目，请完全按照以下步骤启动项目，重要的事情说三遍\r\n\r\n```\r\ngit clone https://github.com/duheng/Mozi.git\r\n\r\ncd Mozi\r\n\r\nyarn install\r\n\r\nyarn start\r\n\r\nyarn run ios (android)\r\n\r\nwindows用户请用 react-native run-android 命令启动\r\n```\r\n\r\n**特别注意** 目前 npm5 存在安装新库时会删除其他库的问题，导致项目无法正常运行。请尽量使用 yarn 代替 npm 操作；\r\n\r\n**项目演示**\r\n\r\n---\r\n\r\n\u003cp align=\"center\"\u003e\r\n\r\n\u003cimg height=\"470\" src=\"https://github.com/duheng/Mozi/blob/master/splash.gif\" /\u003e\r\n\u003cimg height=\"470\" src=\"https://github.com/duheng/Mozi/blob/master/SectionList.gif\" /\u003e\r\n\u003cimg height=\"470\" src=\"https://github.com/duheng/Mozi/blob/master/HeaderImageScrollView.gif\" /\u003e\r\n\u003cimg height=\"470\" src=\"https://github.com/duheng/Mozi/blob/master/back.gif\" /\u003e\r\n\u003cimg height=\"470\" src=\"https://github.com/duheng/Mozi/blob/master/mine.jpg\" /\u003e\r\n\u003c/p\u003e\r\n\r\n---\r\n\r\n#### 已经完善文档 \u0026 已完善效果\r\n\r\n一：\r\n[添加启动屏 API](http://www.jianshu.com/p/4540ac17dfd4)\r\n\r\n二：\r\n[添加 icons](http://www.jianshu.com/p/a25e4ecce60f)\r\n\r\n三：\r\n[React Native 预设占位 placeholder](http://www.jianshu.com/p/984ef99641f5)\r\n\r\n四：SectionList Demo \u0026 下拉刷新\r\n\r\n五：FlatList Demo\r\n\r\n六：react-navigation 自定义可缩放头部\r\n\r\n七：返回到指定页面（返回多级）\r\n\r\n群号:397885169（有问题或者需求欢迎进群探讨 ）\r\n\r\n简书：http://www.jianshu.com/u/c971c7ffa27e\r\n\r\n知乎：https://www.zhihu.com/people/duheng2011/activities\r\n\r\n**项目结构**\r\n\r\n```\r\n├── README.md                   // help\r\n├── src                         // Ract Native\r\n│   ├── app                     // redux部分\r\n│   │    ├── actions            // creat action\r\n│   │    ├── constants          // constants\r\n│   │    ├── reducers           // reducer\r\n│   │    ├── sagas              // redux saga\r\n│   │    ├── selectors          // 过滤以及准备view层需要的数据\r\n│   │    └── store              // store\r\n│   ├── commons                 // 共享基础模块\r\n│   ├── components              // Ract Native 通用组件\r\n│   ├── containers\r\n│   │    └── page               // 具体业务模块\r\n│   ├── routers                 // 路由部分\r\n│   │    ├── index.js           // page模块聚合页\r\n│   │    └── app.js             // 导航注册\r\n│   ├── AppNavigationState.js   // Nvigation state 入口\r\n│   ├── config.js               // 导航通用配置\r\n│   └── root.js                 // Ract Native 入口页\r\n│\r\n├── ios                         // ios原生部分\r\n├── index.js                    // 项目注册入口文件\r\n├── android                     // android原生部分\r\n├── node_modules                // 项目依赖包\r\n├── __test__                    // 自动化测试\r\n├── package.json                // 项目配置信息\r\n├── pre-commit                  // 提交代码时按照.eslint的配置进行校验\r\n├── .editorconfig               // 统一不同编辑器配置\r\n├── .babelrc                    // 设置转码的规则,插件,文件地址映射\r\n├── .eslintrc                   // 代码校验规则配置\r\n└── yarn.lock                   // 依赖的版本信息管理\r\n```\r\n\r\n**项目架构说明**\r\n\r\n1.  在 redux 的集成方面采用了 es7 的 Decorator 的写法，这样写的优势是在不污染现有代码逻辑的前提下实现了链接 store（非侵入式编程思想）\r\n\r\n```\r\n@connect(Selector筛选后符合渲染标准的数据, 当前页面需要的Actions)\r\nexport default class Zi extends Component {\r\n\r\n}\r\n```\r\n\r\n2.  采用了 redux-saga 来做扁平（描述性语言）化的数据组织方式，（优势是用同步的方式写异步码方便自动化测试，随意组织多个 action，代理 mock 数据，自由控制 loading）\r\n\r\n3.  在导航（react-navigation）的配置方面我封装了 config.js 的通用配置，默认会用通用配置，当你在业务页面配置了相应的字段会用你自己配置的覆盖默认的。实现了自由耦合。比如下面 demo 是 墨规范 页面我配置了 headerTitle 会用当前配置的：\r\n\r\n```\r\n  export default class Rule extends Component {\r\n    static navigationOptions = {\r\n      headerTitle: '墨规范',\r\n    };\r\n  }\r\n```\r\n\r\n4.  待更新...\r\n\r\n### 依赖库\r\n\r\n    1. react-navigation: 是官方主推的导航库，支持ios和安卓，如果你想很好的支持安卓用户最好用这个，\r\n    [导航器性能对比](http://reactnative.cn/docs/0.43/navigation.html)\r\n    2. redux:   a predictable state container\r\n    3. react-redux:  offical react binding for redux\r\n    4. redux-saga:  An alternative side effect model for Redux apps\r\n    5. redux-logger:    日志\r\n\r\n### 组件库\r\n\r\n     1.  MOUI: 是一套轻量的适用于react-native的ui组件库，待开发..\r\n     2.  react-native-vector-icons: 是可以直接使用图片名就能加载图标的第三方库,类似于web的iconfont矢量图，使用很方便, 你不需要在工程文件夹里塞各种图片, 节省很多空间\r\n     3. react-native-scrollable-tab-view：是一个很好用的可滑动的tab导航，（如果你的项目的tab没有超过一屏的话就用react-navigation的TabNavigator）\r\n\r\n### 消息推送\r\n\r\n    1. jpush-react-native: 极光推送官方支持的 React Native 插件（Android \u0026 iOS）\r\n    2. react-native-code-push: 微软的热更新开源库\r\n\r\n### 如何使用消息推送\r\n\r\n    全局搜索 896ea8641e9c62c38906de41 ，替换成自己的JPUSH_APPKEY就可以了\r\n\r\n### 如何使用热更新\r\n\r\n    1. android部分：全局搜索 TyXCHztJx9rvb3Ogy5I4cVU-DHGH6a76e0de-a57f-4a89-b60d-01d72ab0675f ，替换成自己的安卓项目codepushkey就可以了；\r\n    2. ios部分： 全局搜索 5WgvzaDBLyL5zKjeLscIhfGKtJHb6a76e0de-a57f-4a89-b60d-01d72ab0675f ，替换成自己的ios项目codepushkey就可以了；\r\n\r\n### 编程规范\r\n\r\n    编程规范我们使用的是airbnb，但是这还不够，我希望大部分的代码格式类的工作都能自动化帮我做，开发人员只需要注重业务代码就好。\r\n    为此我们用prettier+eslint+sublimelinter+airbnb，在保存代码的时候就对我们的代码进行格式化，提交代码之前再做一次严格的airbnb校验。基本就能保证团队代码的可维护性。\r\n\r\n### 数据统计和错误分析\r\n\r\n    1. 项目基础数据由talkingdata收集并分析，7日内错误率达到0.5%时发相关报警短信邮件给开发人员处理。\r\n    2. 细粒度的数据收集用react-native-google-analytics-bridge来收集，主要用于产品部门，大数据，项目运营人员对用户行为以及数据的分析\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fduheng%2Fmozi","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fduheng%2Fmozi","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fduheng%2Fmozi/lists"}