📱 My blog app powered by @facebook/react-native
Switch branches/tags
Nothing to show
Clone or download
surmon
surmon update
Latest commit 4edfd0d Dec 4, 2017
Permalink
Failed to load latest commit information.
__tests__ nothing Dec 4, 2017
android nothing Dec 4, 2017
dist nothing Dec 4, 2017
ios nothing Dec 4, 2017
screenshot nothing Dec 4, 2017
src nothing Dec 4, 2017
.babelrc nothing Dec 4, 2017
.buckconfig nothing Dec 4, 2017
.flowconfig nothing Dec 4, 2017
.gitattributes nothing Dec 4, 2017
.gitignore nothing Dec 4, 2017
.watchmanconfig nothing Dec 4, 2017
LICENSE nothing Dec 4, 2017
README.md update Dec 4, 2017
app.json nothing Dec 4, 2017
index.android.js nothing Dec 4, 2017
index.ios.js nothing Dec 4, 2017
package.json nothing Dec 4, 2017
reset.sh nothing Dec 4, 2017
yarn.lock nothing Dec 4, 2017

README.md

surmon.me.native

GitHub issues GitHub forks GitHub stars

A react-native applaction for surmon.me

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

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

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                   * 清空项目依赖并重新安装