关闭

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

标签: React NativeAndroidreact-reduxreact-thunk
5222人阅读 评论(20) 收藏 举报
分类:
本开源项目已授权江清清技术专栏独家发布,转载请注明出处

项目已开源到GithubComicApp欢迎大家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设计

  1. 使用官方的Navigator管理全局路由,可自由配置Scene的出场动画,处理Android端的后退键事件
  2. 使用FlexBox和jsx语法进行布局,并封装了一系列通用的组件,比如TopBar 、带上下拉功能的ListView等,便于全局复用
  3. 导入第三方库react-native-wechat实现微信分享
  4. 使用StaticContainer,阻止ListView的头部和尾部频繁刷新,优化渲染性能。
  5. 引入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文件删除)

五、效果图

    

   

8
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:347715次
    • 积分:4656
    • 等级:
    • 排名:第6689名
    • 原创:177篇
    • 转载:7篇
    • 译文:2篇
    • 评论:361条
    博客专栏
    文章分类
    最新评论
    关于我