开源中国 2018 年度最后一场技术盛会邀你来约~错过就要等明年啦!点此立即预约

lhq / RTCoinJavaScript

Metrics
0
Watch 5 Star 12 Fork 2
Sign up for free
Explore and code with more than 2 million developers,Free private repositories !:)
Sign up
A self-developed React-Native project[一个自己开发的React Native小项目] spread retract

  • JavaScript 96.4%
  • Objective-C 1.8%
  • Java 1.0%
  • Python 0.8%
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

React native框架做的一个小项目,目前正在更新中....

目前做的是一个界面框架,是由底部导航的五个部分组成,分别是“挖矿”首页、任务、好友、交易和主页“我”组成,导航的实现用到了react-navigation来控制;还实现了注册登录模块的功能,用到了管理状态state的利器React-thunk和React-redux,简单实现了页面和跳转。

该项目是本人第一次学RN做的项目,边学边做,遇到不懂的就查,实在不懂就问。知识点很多很杂,能做到逐个勉强击破(加个"勉强"免得被喷:sweat_smile::sweat_smile:),
对于我来说,RN要学的东西很多,是一个全新的技术领域,这对于一个前端小白来讲更是具有挑战性,前辈说要坚持,学多点总归是好的,何况知识很多时候是互通的。

学无止境,Fighting!:punch::punch::punch:


  • 6.29更新
实现了ListView的九宫格效果,,并给每个item都添加了点击事件,效果如下:(左)
  • 7.01更新
用StatusBar实现了沉浸式状态栏的效果,并添加了物理返回键的监听,效果如下:(右)
参照 如何让你的 React Native 应用在键盘弹出时优雅地响应,用KeyboardAvoidingView解决了:点击文本输入框时,键盘会弹出并且遮盖住输入框的问题:
  • 7.03更新
嵌入自己封装的react-native-vedio视频播放器(上图中),参照react-native-vedio中文文档,这是自己根据github上的文档翻译的,国内找不到中文文档:sob::sob::sob:
  • 7.05更新
解决了ListView中item点击后跳转到指定页面的问题,就是需要在调用组件的页面中声明“this.props.navigation.navigate=navigate”,这样在组件中就可以进行对页面的跳转。
并添加了新闻阅读(即使用第三方提供的api接口请求提供网络数据),并利用FlatList来显示拿到的数据(上图右),nice!:raised_hands::raised_hands::raised_hands:

顶部

  • 7.06更新
重新设计了登录界面,使得更加美观好看,并附有动画效果~这是参照一哥们写的项目react-native-login-screen效果如下图右→
  • 7.12更新
更新了闪屏页,获取联系人等。用到了跟原生代码做交互的依赖库react-native-splash-screen
  • 7.15更新
解决Listview中数据源为json时,获取不了本地资源的问题,json数据中提供的url不能为本地资源的路径,否则会找不到资源解析,如果要获取本地资源,可以在js文件中export一个data对象,在data中存储本地资源的数据源,具体参考ListViewComponent.js
  • 7.20更新
重新设计了“我的”界面,以至于不再那么土了:laughing::laughing::laughing:然后就是继续优化UI界面~(上面的第二三张截图)
  • 7.24更新
交易界面中应用了react-native-charts-wrapper这个图表库(如上图),这个第三方图形库图形很全面,功能很强大,可以实现缩放,还有一些有趣的动画效果~下面是自定义的图形,用作显示增长趋势。
  • 7.26更新
实现了新闻列表页和详情页的设计,加深了对react-navigation的了解程度:在一个界面嵌套另外多个界面时,要怎么用等等。
  • 7.27更新
实现下图最右边的布局,有点像是支付宝的页面哈···使用Listview实现的,顶部的导航栏首次对组件进行传参调用,具体可参考我的这篇博客:React Native组件学习之设置动态参数,写得粗糙,见谅哈:joy::joy::joy:
  • 8.06更新
最近比较忙,更新得比较少,来补充一下关于获取联系人列表的点。这个需求我用到了react-native-contacts-picker,很实用的一个库,通讯录的选择器是调用系统原生的。实现的效果如下:
  • 8.16更新
1、将LoginScreen用真实数据接口实现了登录模块的功能,另外,还实现了注册、短信登录、忘记密码找回的功能实现。其中封装了一些工具类,例如实现网络请求的fetchUtil,正则校验手机号码的CheckUtils,短信验证码计时器CountdownUtil等,这些工具类可以一次封装,多次使用,很方便:thumbsup:
2、VideoScreen做了对播放进度的监听处理,使得弹出弹框进入分享界面,分享界面还没做,后续会跟上...另外,关于如何跳转回调使得播放进度继续进行,我写了个博客react-navigation的回调跳转作为知识总结,分享给大家~
  • 9.30更新:punch::punch::punch: 最后一次更新啦:kissing_cat::heart::heart::heart:多谢大家的star!明天就国庆了,好好玩也要好好学习鸭~:laughing:
1、新增了微信分享,需要到微信开发者公众平台申请哦,申请步骤和使用方法可以参考我的这篇博客,里边有详细的介绍,是结合了本项目的一次实践Demo,博客在此React Native第三方接口之微信分享,需要的话可以参考下~

微信开放平台

实现后的小截图:
2、新增了极光推送,同样需要用到第三方极光推送的接口(废话?我在说什么?),大家可以去他家官网查看文档极光数据
下面是申请创建应用后的管理界面:

微信开放平台

同样,实现后的小截图:
3、最后一点,新增了点击个人信息头像后的选择照片|拍照的实现,这里用到了这个库react-native-image-picker
效果如下:
OK!Done 这个项目我就不加以维护了,如果能帮到大家学习的话,我是真的觉得很受鼓励:wink:,继续出发~:point_right:下一站是哪里呢?

点我回到顶部

Comments ( 1 )

You need to Sign in for post a comment

Help Search