分享一个react-navigation+redux+redux-saga的架构



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

    项目github: https://github.com/duheng/Mozi

    项目预览:
    0_1509354724553_image.png
    0_1509354672738_image.png
    0_1509354759271_image.png

    涉及主要技术

    1.项目主架构:

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

    2.自动化工程部分

    eslint,
    prettier,
    editorconfig

    项目结构

    ├── 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 // 具体业务模块
    │ │ ├── app.js // 导航注册
    │ │ └── index.js // page模块聚合页
    │ ├── config.js // 导航通用配置
    │ └── root.js // Ract Native 入口页

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



  • 可以,下来看看,谢谢2



  • 后台接口关闭了吗?请求不到数据了。



  • 刚看了一下,那个接口停用了,我明天换一个传上去,明天晚上你再更新一下



  • 嗯嗯, 我把项目克隆下来后,用npm install 安装之后总是报 找不到 .h后缀的配置文件,后来用yarn install 安装之后好了,但是你的路径好像写的有点问题,手动修改之后才运行起来。



  • @magicAlban 你是windows电脑开发?



  • @magicAlban 接口更换完毕,git pull 一下重新编译就可以用了



  • mac 用npm install 安装之后总是报 找不到 .h后缀的配置文件 使用xcode 启动项目时报的错



  • @magicAlban 请完全按照我的READEME启动 0_1509518516171_image.png



  • 更新了返回到指定页面功能,需要的参考一下


登录后回复