ghost60 / rtcoin Goto Github PK

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

该项目是本人第一次学RN做的项目，边学边做，遇到不懂的就查，实在不懂就问。知识点很多很杂，能做到逐个勉强击破(加个"勉强"免得被喷:sweat_smile::sweat_smile:),

对于我来说，RN要学的东西很多，是一个全新的技术领域，这对于一个前端小白来讲更是具有挑战性，前辈说要坚持，学多点总归是好的，何况知识很多时候是互通的。

学无止境，Fighting！:punch::punch::punch:

Update

实现了ListView的九宫格效果，，并给每个item都添加了点击事件，效果如下：（左）

用StatusBar实现了沉浸式状态栏的效果，并添加了物理返回键的监听，效果如下：（右）

参照 如何让你的 React Native 应用在键盘弹出时优雅地响应,用KeyboardAvoidingView解决了:点击文本输入框时，键盘会弹出并且遮盖住输入框的问题：

嵌入自己封装的react-native-vedio视频播放器(上图中)，参照react-native-vedio中文文档，这是自己根据github上的文档翻译的，国内找不到中文文档:sob::sob::sob:

解决了ListView中item点击后跳转到指定页面的问题，就是需要在调用组件的页面中声明“this.props.navigation.navigate=navigate”，这样在组件中就可以进行对页面的跳转。

并添加了新闻阅读(即使用第三方提供的api接口请求提供网络数据)，并利用FlatList来显示拿到的数据(上图右)，nice！:raised_hands::raised_hands::raised_hands:

重新设计了登录界面，使得更加美观好看，并附有动画效果~这是参照一哥们写的项目react-native-login-screen效果如下图右→

更新了闪屏页，获取联系人等。用到了跟原生代码做交互的依赖库react-native-splash-screen

解决Listview中数据源为json时，获取不了本地资源的问题，json数据中提供的url不能为本地资源的路径，否则会找不到资源解析，如果要获取本地资源，可以在js文件中export一个data对象，在data中存储本地资源的数据源，具体参考ListViewComponent.js

重新设计了“我的”界面，以至于不再那么土了:laughing::laughing::laughing:然后就是继续优化UI界面~（上面的第二三张截图）

交易界面中应用了react-native-charts-wrapper这个图表库（如上图），这个第三方图形库图形很全面，功能很强大，可以实现缩放，还有一些有趣的动画效果~下面是自定义的图形，用作显示增长趋势。

实现了新闻列表页和详情页的设计，加深了对react-navigation的了解程度：在一个界面嵌套另外多个界面时，要怎么用等等。

实现下图最右边的布局，有点像是支付宝的页面哈···使用Listview实现的，顶部的导航栏首次对组件进行传参调用，具体可参考我的这篇博客：React Native组件学习之设置动态参数，写得粗糙，见谅哈:joy::joy::joy:

最近比较忙，更新得比较少，来补充一下关于获取联系人列表的点。这个需求我用到了react-native-contacts-picker，很实用的一个库,通讯录的选择器是调用系统原生的。实现的效果如下：

1、将LoginScreen用真实数据接口实现了登录模块的功能，另外，还实现了注册、短信登录、忘记密码找回的功能实现。其中封装了一些工具类，例如实现网络请求的fetchUtil，正则校验手机号码的CheckUtils，短信验证码计时器CountdownUtil等，这些工具类可以一次封装，多次使用，很方便:thumbsup:

2、VideoScreen做了对播放进度的监听处理，使得弹出弹框进入分享界面，分享界面还没做，后续会跟上...另外，关于如何跳转回调使得播放进度继续进行，我写了个博客react-navigation的回调跳转作为知识总结，分享给大家~

1、新增了微信分享，需要到微信开发者公众平台申请哦，申请步骤和使用方法可以参考我的这篇博客，里边有详细的介绍，是结合了本项目的一次实践Demo，博客在此React Native第三方接口之微信分享,需要的话可以参考下~

实现后的小截图：

2、新增了极光推送，同样需要用到第三方极光推送的接口（废话？我在说什么？），大家可以去他家官网查看文档极光数据

下面是申请创建应用后的管理界面：

同样，实现后的小截图：

3、最后一点，新增了点击个人信息头像后的选择照片|拍照的实现，这里用到了这个库react-native-image-picker

效果如下：

OK!Done 这个项目我就不加以维护了，如果能帮到大家学习的话，我是真的觉得很受鼓励:wink:，继续出发~:point_right:下一站是哪里呢？