仿《ONE》APP又来了!
又写了一个《ONE》,别急呀,我可没copy上次写的代码~
这是用ReactNative写的《ONE》
基本界面都已完成,固然了,有些处所图费事(搞不定) + 寻求速率写的Demo,就自然会致使:
退而求其次的完成体式格局
代码构造能够不太范例/清楚
能够另有bug呢(我不听我不听)
项目地点 => https://github.com/liuzho/ONE-RN
我的个人主页 => https://liuzho.com
只管Kotlin风景无穷险些对各大社区进行了屠版,但我照样冒着被吞没的风险把这个Demo发出来了,万一有人看呢(逃..
没事,ReactNative自有魅力!(种种妙技全给你学了管你谁有魅力)…..
这个Demo对你有无协助?
假如你初学RN,那末协助能够有限,请你点个赞/点个star,以备后续进修
假如你是RN大牛,那末请你点个赞/点个star,逐步看,逐步讽刺我
假如你有一丢丢RN基本,想练练手,那末请你点个赞/点个star,横竖你也学不到啥略略略~~~
预览
固然了,国际惯例,甩预览图:
在你的电脑上运转
你须要如许做:
git clone https://github.com/liuzho/ONE-RN.git
cd ONE-RN
npm install//牢记不要用cnpm!亲测cnpm致使没法运转
react-native run-ios
orreact-native run-android
理论上iOS(测试可用,部份组件如ToastAndroid不通用报黄)和Android都可以运转
项目状况
"react": "16.0.0-alpha.6",
"react-native": "0.44.0",
"react-navigation": "^1.0.0-beta.9"
StackNavigator / TabNavigator的运用
你能看到的:底部Tab(TabNavigator)、第一个Tab内相似viewPager滑动(TabNavigator)、跳转到用户/搜刮等界面(StackNavigator) 为何不必ViewPagerAndroid来完成第一个Tab内的滑动呢,因为这个组件在iOS不能用啊...GitHub应当有通用组件,我没有去找,用TabNavgation算了吧
组件信息通报props / nav的router照顾数据params这些
抽取了一个Toolbar组件,title的显现经由过程props/router搞定,StackNavigator的router(项目内appNavigation)经由过程props猖獗通报给各个界面/组件
通用控件的抽取
Toolbar、CdView等一些组件的抽取(我没有锐意去做这件事,能够有些应当抽取的控件我并没有很好的抽取出来)
动画Animated
我认可实在就一个假轮回扭转动画....CdView点击按钮扭转,之前总结过Animated学问点如今全忘了...
WebView加载网页并插进去JS代码
Detail页面的内容,因为想快点完成Demo,也以为界面写也就是一样的,就没本身完成,直接用了WebView加载响应的WebApp页面,然后经由过程`webView.injectJavaScript`插进去我的JS代码,将内容中头部和底部一些不须要的处所悉数经由过程`Element.reoveChild`给移除掉了
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)
另有其他一些我一时也想不起来,你以为都用到了啥?T_T求不打
谢谢API哥们儿?此次你还冒出来不?
API:戳这里=>**[ONE的API](https://github.com/jokermonn/-Api/blob/master/ONEv3.5.0~.md)** 注:若侵占《ONE》权益,我将实时删除一切相关内容
我将坚持更新/优化一段时间,毕竟另有一些细节没完成,另有挺多须要优化的处所