[置顶] React Native开源项目 「漫画书」

刚创建的React
Native 微信公众号，欢迎微信扫描关注订阅号，每天定期会分享react
native 技术文章，移动技术干货,精彩文章技术推送。同时可以扫描我的微信加入react-native技术交流微信群。欢迎各位大牛,React
Native技术爱好者加入交流！








项目已开源到Github：ComicApp，欢迎大家fork，star。

一、App模块

 开发框架：React Native  react-redux  react-thunk

 开发环境：Vs Code 1.8
 分为首页、发现、精选、我四大版块，以下是功能列表：
使用ViewPager跟ListView展示图文列表。
推荐精彩漫画列表。
精选内容，分类展示，增加滑动Tab，增加用户体验。
自定义扩展ListView，实现上拉加载更多数据，下拉刷新数据。
添加缓存功能，增强用户体验。
  项目采用React-Native   react-redux  
react-thunk框架开发，目前由于没有mac设备，只完成兼容Android环境，代码模块化  实现，组件封装实现代码复用。API来自聚合数据。

二、App设计

使用官方的Navigator管理全局路由，可自由配置Scene的出场动画，处理Android端的后退键事件
使用FlexBox和jsx语法进行布局，并封装了一系列通用的组件，比如TopBar 、带上下拉功能的ListView等，便于全局复用
导入第三方库react-native-wechat实现微信分享
使用StaticContainer，阻止ListView的头部和尾部频繁刷新，优化渲染性能。
引入redux相关功能，包括redux/react-redux/redux-thunk/，设计与漫画列表和详情相关的全局state结构，使用redux管理相关的组件

三、项目依赖库

  部分图标采用了icons，查看具体的图标名称可到
ionics官方文档

 依赖方式，cd到项目根目录，执行： npm install [插件名称] -save
 (1)redux: ^3.6.0

 (2)react-redux: ^5.0.2

 (3)react-thunk: ^1.0.0

 (4)redux-thunk: ^2.1.0

 (5)react-native-blur: ^2.0.0
 (6)react-native-viewpager

 (7)react-native-vector-icons: ^4.0.0

 (8)react-native-scrollable-tab-view: ^0.7.0

 (9)react-native-lightbox: ^0.6.0
 (10)react-native-simple-store: ^1.1.0

四、打包Apk

1.生成签名Keystore文件，并将keystore签名文件放到android/app根目录下

keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

2.在gradle.properties文件下增加常量标识

MYAPP_RELEASE_STORE_FILE=my-release-key.keystore
MYAPP_RELEASE_KEY_ALIAS=my-key-alias
MYAPP_RELEASE_STORE_PASSWORD=123456
MYAPP_RELEASE_KEY_PASSWORD=123456

3.在app的build.gradle下的增加如下配置

android {
...
defaultConfig {
...
}
signingConfigs {
release {
storeFile file(MYAPP_RELEASE_STORE_FILE)
storePassword MYAPP_RELEASE_STORE_PASSWORD
keyAlias MYAPP_RELEASE_KEY_ALIAS
keyPassword MYAPP_RELEASE_KEY_PASSWORD
}
}
buildTypes {
release {
...
signingConfig signingConfigs.release
}
}
}

5.进入android目录，终端执行如下命令：

./gradlew assembleRelease

以上执行完后，apk文件会生成在android/app/build/outputs/apk/目录下。（每次打包之前，将之前的apk文件删除）

五、效果图