ReactNative仿《ONE》APP

仿《ONE》APP又来了!

又写了一个《ONE》,别急呀,我可没copy上次写的代码~

这是用ReactNative写的《ONE》

基本界面都已完成,固然了,有些处所图费事(搞不定) + 寻求速率写的Demo,就自然会致使:

  1. 退而求其次的完成体式格局

  2. 代码构造能够不太范例/清楚

  3. 能够另有bug呢(我不听我不听)

项目地点 => https://github.com/liuzho/ONE-RN

我的个人主页 => https://liuzho.com

只管Kotlin风景无穷险些对各大社区进行了屠版,但我照样冒着被吞没的风险把这个Demo发出来了,万一有人看呢(逃..

没事,ReactNative自有魅力!(种种妙技全给你学了管你谁有魅力)…..

这个Demo对你有无协助?

假如你初学RN,那末协助能够有限,请你点个赞/点个star,以备后续进修

假如你是RN大牛,那末请你点个赞/点个star,逐步看,逐步讽刺我

假如你有一丢丢RN基本,想练练手,那末请你点个赞/点个star,横竖你也学不到啥略略略~~~

预览

固然了,国际惯例,甩预览图:

《ReactNative仿《ONE》APP》

《ReactNative仿《ONE》APP》

《ReactNative仿《ONE》APP》

在你的电脑上运转

你须要如许做:

  1. git clone https://github.com/liuzho/ONE-RN.git

  2. cd ONE-RN

  3. npm install//牢记不要用cnpm!亲测cnpm致使没法运转

  4. react-native run-ios or react-native run-android

理论上iOS(测试可用,部份组件如ToastAndroid不通用报黄)和Android都可以运转

项目状况

    "react": "16.0.0-alpha.6",
    "react-native": "0.44.0",
    "react-navigation": "^1.0.0-beta.9"
  1. StackNavigator / TabNavigator的运用

    你能看到的:底部Tab(TabNavigator)、第一个Tab内相似viewPager滑动(TabNavigator)、跳转到用户/搜刮等界面(StackNavigator)
    
    为何不必ViewPagerAndroid来完成第一个Tab内的滑动呢,因为这个组件在iOS不能用啊...GitHub应当有通用组件,我没有去找,用TabNavgation算了吧
    
  2. 组件信息通报props / nav的router照顾数据params这些

    
    抽取了一个Toolbar组件,title的显现经由过程props/router搞定,StackNavigator的router(项目内appNavigation)经由过程props猖獗通报给各个界面/组件    
    
  3. 通用控件的抽取

    Toolbar、CdView等一些组件的抽取(我没有锐意去做这件事,能够有些应当抽取的控件我并没有很好的抽取出来)
    
  4. 动画Animated

    我认可实在就一个假轮回扭转动画....CdView点击按钮扭转,之前总结过Animated学问点如今全忘了...
    
  5. WebView加载网页并插进去JS代码

    Detail页面的内容,因为想快点完成Demo,也以为界面写也就是一样的,就没本身完成,直接用了WebView加载响应的WebApp页面,然后经由过程`webView.injectJavaScript`插进去我的JS代码,将内容中头部和底部一些不须要的处所悉数经由过程`Element.reoveChild`给移除掉了
    
  6. ListView、fetch运用

    关于ListView、fetch的运用我有写过一篇文章:[ReactNative收集fetch数据并展现在listview中](http://www.jianshu.com/p/22de6734d858)
    
    那末为何我没有在这个基本上完成下拉革新、上拉加载、headerView、footerView呢?因为有一个FlatList完整支撑这些做法!那又为何我没有用FlatList呢?!因为在我发明FlatList的时刻为时已晚,我已不想再修正之前写了的代码了....[FlatList中文文档](http://reactnative.cn/docs/0.44/flatlist.html#content)
    
  7. 另有其他一些我一时也想不起来,你以为都用到了啥?T_T求不打

  8. 谢谢API哥们儿?此次你还冒出来不?

    API:戳这里=>**[ONE的API](https://github.com/jokermonn/-Api/blob/master/ONEv3.5.0~.md)**
    
    注:若侵占《ONE》权益,我将实时删除一切相关内容
    
  9. 我将坚持更新/优化一段时间,毕竟另有一些细节没完成,另有挺多须要优化的处所

结语

  • 更多内容迎接接见我的主页我的博客

  • 以为本文/本Demo对你有所协助,请不要忘了点一下文末的”♡”让他变成”❤”

  • 固然,也别忘了Star一下我的堆栈 => ONE-RN

  • 进修就是耐住孤单不停踩坑,多着手敲就可以有更多的学问履历和肩椎脊柱受损T_T

    原文作者:LiuZh
    原文地址: https://segmentfault.com/a/1190000009499424
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞