OSC 第 129 期高手问答 —— 如何使用 React Native 实现跨平台开发

局长 发布于 2016/10/09 16:17
阅读 7K+
收藏 52

OSCHINA 本期高手问答(10月9日-10月16日) 我们请来了@boolron 为大家解答关于React Native开发实践方面的问题。

@boolron ,甘果移动iOS高级工程师,从2012年开始接触客户端开发,参与过多个App的核心研发,如有演出、音乐人攻略等,其中有演出曾上榜App Store音乐类App前10,积累了丰富的移动开发经验,当Facebook推出React Native后,对其研究并开展甘豆影评RN版的开发,掌握运用Redux来维护App的状态变更。

甘果影评 React Native 版源码下载地址:

https://git.oschina.net/ganguo/yingping_rn

甘豆影评是一个专注于阅读电影影评的App,无需登录,只有喜爱的电影和各种热评。大部分甘果人都喜欢看电影,也喜欢读影评,两年前我们就开始做iPhone版和Android版的影评工具,本来只是作为公司业余项目,没想到上线后得到不少赞赏与意见,然后我们就继续迭代更新;

而2016年大热的React Native技术也引起了我们关注,然后开始用它来实现跨平台开发,开发过程以JavaScript为主,由于参与人员都来自iOS或者Android懂JavaScript的程序员,没有同时精通两个平台的,我们就决定暂时先选用同时兼容两个端的UI控件,避免写大量原生代码,然后踩了3个月的坑,终于把影评的主要功能用React Native的方式实现了,两个平台都能跑起来,iPhone版本相对比较完善。

项目中的更换阅读主题是主打功能,用了Redux的思想来触发相应的Action,而Action会更改主题的State,State一变就触发React的render方法来渲染界面,整个过程没有主动配置State,全靠用户点击来触发Action,代码结构更为优雅。

OSChina 高手问答一贯的风格,不欢迎任何与主题无关的讨论和喷子。
下面欢迎大家就React Native方面问题向@boolron 提问,请直接回帖提问。

加载中
1
amonxu
amonxu

@boolron :你好,RN目前在项目实践中已知的坑有哪些?假如新开发一个项目,完全使用RN是否可行?另外想了解一下您在项目中使用的程度和场景,谢谢! 

ios122
ios122
热更新和在线更新是不一样的,分别对应的是 hot-reloading 和 reload,调试时是通过 hot 选项控制;鉴于 hot-reloading 需要和服务器实时保持一个socket长连接和既有的不确定性,我不相信会有公司会采用 hot-reloading 的方案,应用于生产环境.如果真的应用hot-reloading了,那就分享下心得呗!
boolron
boolron
不太建议完全使用RN,因为Facebook也在不断填坑,每个月都有新版本,一个长期项目经不起频繁换依赖库的版本;我们公司也只是作为业余研究性质,不过RN的热更新思路真心不错,可以随时更换功能模块。
0
喷子
喷子
我问一下为什么用加粗字体标出来不欢迎我?
eechen的粉丝
eechen的粉丝
因为你是喷子!!!!!!!!!!!!
0
分享一下
分享一下

@boolron : 最终发布的安装文件 不会有被反编译或者被查看到javascript代码的风险吧? (毕竟是用javascript开发的)。

另外,你们踩坑之路,遇到难题后一般去哪里查文档的? 也就是有没有优秀的RN文档资源或者图书推荐? 【感谢!】

boolron
boolron
不用担心,Facebook打包出来的js代码是经过混淆的,反混淆出来也难以看出业务逻辑。一些学习资料:https://github.com/jondot/awesome-react-native https://github.com/ele828/react-native-guide
eechen的粉丝
eechen的粉丝
请查询相关jscore文档
0
xpbob
xpbob
@boolron :相比其他移动开发,他的优势是什么
boolron
boolron
RN的优势在于性能与灵活性的平衡,比Hybrid好的性能,热更新有比Native好的灵活性
eechen的粉丝
eechen的粉丝
快速做出业务逻辑和UI 基本一致 、性能介于原生和混合的APP
0
百世经纶之傲笑红尘
百世经纶之傲笑红尘
@boolron :移动APP的本质是什么???在没有网站后台的情况下,就沦为一套UI,APP的价值产生来源于这套UI+这位用户的数据加载,是否有道理
boolron
boolron
有一定道理,但移动App不只是UI,它是产品经理经过深思熟虑后得结果,开发者需要对功能模块化来满足多变需求的迭代,他和后台共同构筑成一个完整的系统,最终系统的价值是为了解决用户的问题
0
一如当初
一如当初
@boolron :原生Android开发获取本地APP图标都是Drawable类型的,如何把本地APP的图标显示在RN的Image上?
boolron
boolron
eechen说的对
eechen的粉丝
eechen的粉丝
回复 @eechen的粉丝 : http://reactnative.cn/docs/0.31/images.html#content 非要让我把地址贴给你 使用混合App的图片资源 如果你在编写一个混合App (通过Xcode的asset类目或者Android的drawable文件夹打包):
eechen的粉丝
eechen的粉丝
回复 @一如当初 : 官网文档大标题都说了,怎么看文档的。
一如当初
一如当初
回复 @eechen的粉丝 : 我找到的要么是加载网络图片,要么是加载自身的静态图片。
eechen的粉丝
eechen的粉丝
这个网上文档很多。
0
e23jiang
e23jiang

@boolron :对于rn我一直很担心就是国内的一些第三方服务的支持情况?如果都需要ios和android对于它们官方的sdk进行封装的话工作量就太大了?你们是否使用了相关的服务:比如支付 登录等!

boolron
boolron
对于微信、QQ、支付宝等都已经有开源封装,随着RN的推进,以后会有更多第三方服务的封装,我们用过微信和支付宝的,推荐一下:https://github.com/reactnativecn/react-native-wx https://github.com/huangzuizui/rn-alipay
eechen的粉丝
eechen的粉丝
其实封装不难。
0
554330833a
554330833a
@boolron :RN的js挺难学的,Redux看不懂,资料又少
boolron
boolron
Redux的资料也不少啊 https://github.com/xgrommx/awesome-redux
eechen的粉丝
eechen的粉丝
回复 @554330833a : 干货 https://github.com/xujinyang/react-native-android-guide https://github.com/LeoMobileDeveloper/ReactNativeMaterials
554330833a
554330833a
@eechen的粉丝 回复@eechen的粉丝 : 请问有什么教程地址发我一下吗
eechen的粉丝
eechen的粉丝
react非常简单,就几个方法,jsx很顺手,redux更简单了,简化后就1个方法,3分钟就可以上手
0
巴顿
巴顿
@boolron :和cordova比较如何?
boolron
boolron
cordova做出来是Hybrid,RN做出来是Native,性能是最大差别,不过如果你的是资讯类应用,不计较性能,团队又多web开发人员也不妨考虑cordova。
返回顶部
顶部