React Native 开源项目之OneM详解

React Native 开源项目之OneM详解_第1张图片
OneM

前言

本篇文章是对最近开源的纯ReactNative项目OneM的使用补充说明,由于OneM项目中大量使用到Redux、Router-flux等框架的知识,对于初学者来说可能看起来有些吃力,不知道从何看起。所以作者打算写一篇较详细的OneM学习手册。想查看OneM更详细的项目介绍请点击。欢迎大家Star

OneM项目地址

https://github.com/guangqiang-liu/OneM

目录

  • 课前准备
  • 项目文件夹目录层级关系及作用
  • react-native-router-flux路由框架详解
  • Redux框架详解
  • fetch网络请求工具类封装
  • IconFont使用及如何自定义自己的font库
  • 蚂蚁金服组件库ant-D如何接入使用
  • iOS、Android平台UI错乱如何优雅的解决
  • 如何自定义基类Component及导航栏
  • 表单提交的数据如何更优雅的自动校验参数
  • 仿网易音乐播放器如何设计的与封装
  • 仿爱奇艺视频播放器如何设计的与封装
  • 实现微信、QQ分享、登录功能
  • ReactNative如何设计与实现AOP埋点
  • 实现颜色渐变的导航栏效果
  • 实现高斯模糊效果

课前准备

开发工具

  • 现在市面上有很多开发工具可供选择:例如(ws、sublime、Atom、vscode等)。这个根据个人喜好选择不同的开发工具即可。

开发环境

  • Node环境、react环境、nvm环境、javajdk环境

基础知识

  • js常用语法

    • js常用语法请参照W3C
  • es5、es6常用语法

    • 请参考作者对es5、es6常用语法的总结:常用es5与es6语法总结

    • 更多详细的es6语法学习请参照:阮一峰老师ECMAScript 6 入门

  • flexbox盒子模型布局

    • 请参照:阮一峰老师Flex布局详解

项目文件夹层级关系及作用

根目录文件夹示意图

React Native 开源项目之OneM详解_第2张图片
root

下面主要介绍src目录

React Native 开源项目之OneM详解_第3张图片
src

src目录下的每一个子模块在这里就不一一展开演示说明了,每一个文件夹都有其自己独立的功能和含义,希望同学们自己私下认真的学习体会每一个文件目录对应的功能特性。

react-native-router-flux路由框架详解

学习react-native-router-flux路由框架请点击

想直接运行Demo查看效果请点击

更多更详细的内容请查看官方Git

Redux框架详解

学习Redux框架请点击

想直接运行Demo查看效果请点击

更多更详细的内容请查看官方Git

fetch网络请求工具类封装

学习fetch请求工具类请点击

想直接运行Demo查看效果请点击

IconFont使用及如何自定义自己的font库

学习IconFont以及如何自定义font库请点击

想直接运行Demo查看效果请点击

查看官方IconFont使用指南请点击

蚂蚁金服组件库ant-D如何接入使用

学习如何接入使用ant-D组件库请点击

想直接运行Demo查看效果请点击

查看ant-D官方组件使用指南请点击

iOS\Android平台样式错乱如何优雅的解决

学习如何优雅的解决双平台样式错乱问题请点击

想直接运行Demo查看效果请点击

如何自定义基类Component及导航栏

学习自定义基类Component及导航栏请点击

想直接运行Demo查看效果请点击

表单提交的数据如何更优雅的自动校验

学习表单如何自动校验请点击

想直接运行Demo查看效果请点击

仿网易音乐播放器如何设计的与封装

学习网易音乐播放器如何实现请点击

想直接运行Demo查看效果请点击

仿爱奇艺视频播放器如何设计的与封装

学习爱奇艺视频播放器如何实现请点击

想直接运行Demo查看效果请点击

实现微信、QQ分享登录功能

学习如何实现微信、QQ分享登录功能请点击

想直接运行Demo查看效果请点击

实现颜色渐变的导航栏效果

学习如何实现颜色渐变的导航栏效果请点击

想直接运行Demo查看效果请点击

实现高斯模糊效果

学习如何实现高斯模糊效果请点击

想直接运行Demo查看效果请点击

更多文章

  • 作者React Native开源项目OneM地址(按照企业开发标准搭建框架完成开发的):https://github.com/guangqiang-liu/OneM:欢迎小伙伴们 star
  • 作者主页:包含60多篇RN开发相关的技术文章http://www.jianshu.com/u/023338566ca5 欢迎小伙伴们:多多关注多多点赞
  • 作者React Native QQ技术交流群(600+ RN工程师):620792950 欢迎小伙伴进群交流学习
  • 友情提示:在开发中有遇到RN相关的技术问题,欢迎小伙伴加入交流群(620792950),在群里提问、互相交流学习。交流群也定期更新最新的RN学习资料给大家,谢谢大家支持!

你可能感兴趣的:(React Native 开源项目之OneM详解)