React Native开源项目GCore

react-native 是facebook的一个跨平台方案。可以开发出同时运行在Android 和iOS平台的app，有着learn onece write everywhere 的口号。 它是用js语言调用原生接口，利用React DOM dif算法进行高效渲染。可以实现接近原生的顺滑效果。

  初学react-native(以下简称RN)是在官方网站上看的文档，国内有人翻译成中文文档，看懂英文的最好到facebook的官网去看，那里有个神奇的模拟器可以运行看看最终效果，不过要想流畅地浏览还是需要把梯子。 文档一般只是提供一些简单的接口，要想快速掌握最好的方式是看别人写的源码，既能快速了解框架的知识，还能看到别人优秀的架构思维。
我最开始看的项目是github上的react-native-nba-app，把所有代码都看完基本上就知道该怎么做了。 浏览完源码之后还是要进行实践开发，否则永远只会停留在理论的层面。
react-native-GCore 模仿的是一款主机游戏资讯app机核

react-native-GCore的功能及特点:

• 有首页，新闻，文章，电台，视频五个模块展示
• 引入redux进行数据管理
• 下载喜欢的电台节目进行本地播放
• 注册和登陆，对主题进行评论
• WebView与RN之间交互
  最终效果如下图所示:
  
  

开发过程

  从建立项目到现在差不多用了两个多月的时间，而且是在公司没有项目开发的时候做的。稍微懂点js和css就可以掌握RN的布局技巧，但是react-native还是有不少坑人地方。想要完美运行在Android和iOS上，还是要踩不少坑。在github上就有很多未解的issues。毕竟Android和iOS两者底层机制不一样。原生的接口和渲染机制都不相同， 短期内的需求要想自己解决很难，除非对两个平台都很熟悉自己封装原生模块。还有一个就是利用别人开发的插件，这些插件很多也是封装了原生模块。
下面列出我在开发的时候碰到的问题：
1. 项目中用到了WebView，机核里面需要原生和WebView交互，在iOS下很简单，直接在iOS webView:shouldStartLoadWithRequest: navigationType:
对应RN中要实现onShouldStartLoadWithRequest
,但是android下就没这么简单了，我想到的是当运行的平台是Android时给每个a标签添加点击事件，通过点击事件把私有链接返回给RN。 涉及到在WebView和RN之间通信，在github上有个react-native-webview-bridge它是个WebView的extension，通过它提供的接口可以方便在两者间进行通信。前几篇有说到这个知识点，需要看的童鞋点这里
2. android 无法获取ListView上每个元素的相对坐标。
在播放音频的时候需要在播放到某个时间轴的时候让ListView
滚动到对应的cell，这时就要需要我们知道具体cell相对于ListView的坐标。文档上并提到这个接口，搜了stackoverflow发现UIManager有个measure方法。具体使用如下:

import {UIManager,findNodeHandle} from 'react-native'

在cell里面实现

var hand = findNodeHandle(this) 
UIManager.measure(hand,(x,y,w,h,px,py)=>{
         console.log('x: '+x +'  y:' + y )
})

这个方法在iOS可以正常使用，但是在Android上 打印出来的x，y都是undefined, github上#12966有人提示说加上 style={{opacity:1}}和 collapsable={false}，经实验无效。
3. Android 默认有overflow:'hidden'。 超出父控件的部分会被隐藏掉，而且是无法修改的。当父控件设置了borderRadius,子控件并不会被父控件的设置了borderRadius而被切掉，官方这里有说明这个问题是由于Android 渲染的特殊性导致。
4.下载文件使用react-native-fs,在iOS平台下载一切顺利，当在Android平台下载时会阻塞UI。
5. 原版机核app首页有滚动手势传递，但是在RN上实现非常不流畅，因而取消了该设计，所以出现了最后开发完成的版本和原版有些许不一致。

  项目仍有很多细节未完善，做开发需要的是耐心和踏实的脚步，还要不断学习给自己充能量。项目暂时告了一段落 ，如果各位有一些更好的建议或者意见，希望大家提出来一起学习探讨。喜欢的童鞋可以在github上点个star。
  
GCore项目地址

原文地址