react native 之Githhub Poular项目分析

250 阅读1分钟

##流程图

Paste_Image.png

桥接 通过封装native组件供react-native调用 AndroidStudoi Xcode

技术栈-技术库

  • react-native-check-box(复选框)
  • react-native-easy-toast (提示框)
  • react-native-splash-screen(启动屏)
  • react-native-htmlview(html渲染)
  • react-native-scrollable-tab-view(标签切换)
  • react-native-sortable-listview(列表排序)
  • react-native-tab-navigator(底部导航)
  • react-native-parallax-scroll-view((视差滚动效果)

技术栈-自定义组件

  • 自定义NavigatorBar
  • 自定义 MoreMenu
  • 自定义启动屏

技术栈-高层封装

  • Native 模块封装
  • BaseCommon封装(代码复用)
  • 网络操作封装
  • 数据库操作封装
  • 数据解析封装
  • Promise封装

##项目结构

Paste_Image.png


项目中技巧

  • 底部导航按钮之图片可以通过tintColor来改变颜色 style={[styles.page_images,{tintColor:'yellow'}]}
  • 底部导航按钮之文字可以通过selectedTitleStyle来改变颜色 ` selectedTitleStyle={{color:'red'}}

Navigator的基本使用

  • 什么是navigator

自定义navigationBar

Paste_Image.png

状态栏 StatusBar

##ListView

`

  • webstorm 代码自动补全 参考