React Native + Redux 的架构,可拿来直接用



  • 此项目致力于构建一套可最基础,最精简,可维护的 react-native 项目,适用于团队合作开发 React Native 项目,我们知道 react-native init 出来的项目只是一个最简单的 demo,距离开发企业级项目还差很远,所以这套框架是我在我们团队开发中总结优化而来的,会提供群里关注度高的问题的解决方案以及 demo,此项目虽然还不够完善,但是以此为基础足可以搭建一个大型项目:

    ##升级 2.1-beta 说明:

    1- 增加auth分枝,包含登录功能,个人中心
    ##升级 2.0-beta 说明:

    1- 升级react-native到0.55.4;升级了react-navigation到2.5.5;这快改动比较大,如果你自己的项目有不会升级react-navigation的可以参考一下config.js
    2- 增加了消息推动和codepush,和jpush,目前安卓版本有效,ios因没有证书还没测试
    3- 删除了redux-saga,删除的原因并不是因为它不优秀,我个人觉得它很优秀,但是根据大多数工程师反馈不会用saga。而我个人觉得它是一个锦上添花的模块,并不是一个必须的,为了适应大多数工程师的使用习惯改回了原始版本。 注:(大家有喜欢用saga的也可以用 mozi1.0 的分枝)
    4-master分枝是2.0-beta版本,还没有完善,大家要用稳定版本的也可以用mozi1.0分枝
    5- 这个版本集成了codepush和jpush,因为我觉得这是每个成熟的产品都必须要有的功能,大家换成自己申请的key就可以了;如果觉得不需要某个我集成的功能可以直接 unlink就OK了;比如:react-native unlink react-native-code-push 这个模块
    涉及主要技术
    1.项目主架构:

    react-native,
    react-navigation,
    redux,
    redux-saga,

    2.自动化工程部分

    eslint,
    prettier,
    editorconfig,
    pre-commit
    项目初始化
    请完全按照以下步骤启动项目,请完全按照以下步骤启动项目,请完全按照以下步骤启动项目,重要的事情说三遍

    git clone https://github.com/duheng/Mozi.git

    cd Mozi

    yarn install

    yarn start

    yarn run ios (android)

    windows用户请用 react-native run-android 命令启动
    特别注意 目前 npm5 存在安装新库时会删除其他库的问题,导致项目无法正常运行。请尽量使用 yarn 代替 npm 操作;

    项目演示

    ![0_1576202669338_splash.gif](正在上传 67%) ![0_1576202713896_SectionList.gif](正在上传 54%) mine.jpg

    已经完善文档 & 已完善效果
    一: 添加启动屏 API

    二: 添加 icons

    三: React Native 预设占位 placeholder

    四:SectionList Demo & 下拉刷新

    五:FlatList Demo

    六:react-navigation 自定义可缩放头部

    七:返回到指定页面(返回多级)

    群号:397885169(有问题或者需求欢迎进群探讨 )

    简书:http://www.jianshu.com/u/c971c7ffa27e

    知乎:https://www.zhihu.com/people/duheng2011/activities

    项目结构

    ├── README.md // help
    ├── src // Ract Native
    │ ├── app // redux部分
    │ │ ├── actions // creat action
    │ │ ├── constants // constants
    │ │ ├── reducers // reducer
    │ │ ├── sagas // redux saga
    │ │ ├── selectors // 过滤以及准备view层需要的数据
    │ │ └── store // store
    │ ├── commons // 共享基础模块
    │ ├── components // Ract Native 通用组件
    │ ├── containers
    │ │ └── page // 具体业务模块
    │ ├── routers // 路由部分
    │ │ ├── index.js // page模块聚合页
    │ │ └── app.js // 导航注册
    │ ├── AppNavigationState.js // Nvigation state 入口
    │ ├── config.js // 导航通用配置
    │ └── root.js // Ract Native 入口页

    ├── ios // ios原生部分
    ├── index.js // 项目注册入口文件
    ├── android // android原生部分
    ├── node_modules // 项目依赖包
    ├── test // 自动化测试
    ├── package.json // 项目配置信息
    ├── pre-commit // 提交代码时按照.eslint的配置进行校验
    ├── .editorconfig // 统一不同编辑器配置
    ├── .babelrc // 设置转码的规则,插件,文件地址映射
    ├── .eslintrc // 代码校验规则配置
    └── yarn.lock // 依赖的版本信息管理
    项目架构说明

    在 redux 的集成方面采用了 es7 的 Decorator 的写法,这样写的优势是在不污染现有代码逻辑的前提下实现了链接 store(非侵入式编程思想)
    @connect(Selector筛选后符合渲染标准的数据, 当前页面需要的Actions)
    export default class Zi extends Component {

    }
    采用了 redux-saga 来做扁平(描述性语言)化的数据组织方式,(优势是用同步的方式写异步码方便自动化测试,随意组织多个 action,代理 mock 数据,自由控制 loading)

    在导航(react-navigation)的配置方面我封装了 config.js 的通用配置,默认会用通用配置,当你在业务页面配置了相应的字段会用你自己配置的覆盖默认的。实现了自由耦合。比如下面 demo 是 墨规范 页面我配置了 headerTitle 会用当前配置的:

    export default class Rule extends Component {
    static navigationOptions = {
    headerTitle: '墨规范',
    };
    }
    待更新...
    依赖库

    1. react-navigation: 是官方主推的导航库,支持ios和安卓,如果你想很好的支持安卓用户最好用这个,
      导航器性能对比
    2. redux: a predictable state container
    3. react-redux: offical react binding for redux
    4. redux-saga: An alternative side effect model for Redux apps
    5. redux-logger: 日志


  • aa3f21de-a9bc-430a-8f77-49d1c3a0dd75-image.png

    新手安装一直提示这个错误,请问如何解决


Log in to reply