Skip to content

xingry/surmon.me.native

 
 

Repository files navigation

surmon.me.native

A react-native applaction for surmon.me

一个非常适合入门学习的react-native项目,有借鉴自其他种子项目的组织方式,代码清晰、结构合理。

相关的其他项目:Web(Nuxt.js)服务端(Node.js)Web后台(Angular4)

Screenshot

IOS

Android

页面结构

  • Welcome
    • 安卓下首屏启动页(1.666秒后跳渲染布局组件)
  • Layout
    • 总布局组件
  • Articles
    • 文章列表组件
    • 可下拉刷新
    • 上拉点击加载更多
  • Detail
    • 文章详情页(markdown解析器)
  • Projects
    • Webview组件
  • About
    • 一些图标组件
  • component/navbar
    • 顶部栏组件(StatusBar)
  • component/menu
    • 菜单栏组件(DrawerLayoutAndroid/TabBarIOS)的封装
  • component/AutoActivityIndicator
    • 加载指示器组件(ActivityIndicator)的封装
  • component/articel
    • 文章列表所需的组件

两端异同

  • 这个项目本身有很强的学习和个人性质,希望他能用少的内容尽量体现出多的东西
  • 菜单栏:因为 IOS 上和 android 上 RN(本身)分别提供了不同的菜单栏(DrawerLayoutAndroid/TabBarIOS),就简单封装了下可在入口尽量优雅地复用
  • 启动屏几乎是个标配,Android 只能通过自定义方式来定义启动屏,所以案桌上多了一层
  • 其他都一样。😁

程序结构

  • 组件:components(公用组件抽象)
  • 页面:pages(主程序的主要构成部分)
  • 布局:layouts(既将两端公用的布局进行封装、又可以用于不同页面下的不同布局,类似nuxt.js中的layout)
  • 服务:service(公共服务抽象,如:网络、缓存...)
  • 样式:styles(类似Web端对样式变量的内聚管理,如果项目较大,路由也可类似管理)
  • 扩展:utils(将任何不涉及依赖的复用纯函数进行封装)

坑和经验

项目问题

  • run-ios失败的时候,可以需要删除ios/build文件夹重新编译
  • 不再使用babel-plugin-module-resolver插件,使用内fbjs模块管理别名
  • 项目出现诸多异常的时候,直接执行. reset.sh会自动清理缓存并重装,而后执行命令即可

Icons图标库问题

安装完毕若有异常,则需要执行rnpm link/react-native link

Markdown解析库异常

使用了react-native-simple-markdown,由于其暂不支持多层列表,故使用黑名单去除了list的解析,同时由于其内部的组件机制,导致无法使用react-native-fit-image组件

IOS

Android

Build Setup

# install dependencies
$ npm install # Or yarn install

# 清除缓存并开启服务器(不执行客户端)
$ npm run dev

# 编译两端并开启服务器(执行前需开启安卓模拟器)
$ npm run dev:all

# 编译IOS并开启服务器
$ npm run dev:ios

# 编译Android并开启服务器(执行前需开启安卓模拟器)
$ npm run dev:android

# 编译IOS的包并输出到./ios/react.bundle
$ npm run build:ios

# 编译Android的包并输出到android/app/build/outputs/apk/app-release.apk
$ npm run build:android

# 替换debug插件,仅项目初次安装完后执行
$ npm run postinstall

# 启用测试服务
$ npm run test

目录结构

surmon.me.native/
   |
   ├──ios/                       * IOS
   |
   ├──android/                   * Android
   |
   ├──src/                       * 主程序
   │   │
   │   │──components             * 所有组件
   │   │
   │   └──pages                  * 所有页面
   │   │
   │   └──images                 * 本地图片资源
   │   │
   │   └──utils                  * Utils
   │   │
   │   └──styles                 * 所有样式变量集中管理
   │   │
   │   └──service                * 封装服务性质的包,如api网络服务、全局配置、缓存封装..
   │   │
   │   └──index.js               * App入口
   │
   │──package.json               * 包信息
   │
   │──.babelrc                   * Babel配置
   │
   └──reset.sh                   * 清空项目依赖并重新安装

About

🌝 A react-native applaction for surmon.me

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 86.9%
  • Objective-C 7.6%
  • Python 2.8%
  • Java 2.5%
  • Shell 0.2%