一直在关注 react native android，请问现在有哪些使用 RN 开发的商业应用

来源：蜘蛛抓取(WebSpider) 时间：2017-01-10 11:21 标签： react native 中文
React Native填坑之旅--重新认识RN - Mr 布鲁斯 - 博客园
如同黑夜里的一道光一样，就这么知道了F8. F8是每年一次Facebook每年一次的开发者大会。每次大会都会release相应的APP，iOS、Android都有。之前都是用Native开发的，但是2016的这一次是用React Native开发的。
FB开源了RN的App
这次fb不仅开源了纯RN写的App，而且一同发布的还有开发这个App的教程。FB承诺会不断的更新这个app。教程放在。不幸的是这个站点居然被墙了！！！技术博也能被墙，心中跑过一万个草泥马！！！F8的App可以在app store和google play下到。不要着急下，我么先一睹F8的风采。
App的设计本身是没的说，而且两个平台的App都遵守了各自平台的设计规范。iOS的用底部的Tab bar，Android的用了侧边划入的菜单。Android的还没来得及用，在低版本、低配置的Android设备上尤其能反映出RN的性能如何。
facebook在F8教程中提到在fb的内部团队使用了RN后，app有大约85%的代码是可以重用的。这是着实减少了很多的开发量。而且使用RN可以快速的开发出app原型。
RN应用处理数据
在应用的开发中少不了需要处理一些数据。F8 使用了实现了后端的功能。Parse很适合作为对数据依赖不那么强的应用的后端。具体Parse如何使用，各位可以查看文档。我们集中讨论RN应用。
一直以来RN都被认为是MVC模式里处理“View”部分的。但是React本身的特点又让这些略有改变。几个React组件组成了一个view，每一个组件内部都可以包含一些逻辑处理的代码。而这些逻辑处理的代码本来应该是由controller来处理的。
React提供了一种开发模式Flux。RN里就可以使用了Flux模式的最佳实践库Redux。Redux引入了Store的概念，提供了一个新的修改state的工作流，扩展了React的数据关系。你可以参考Flux如何使得React应用实现单向数据流的。
F8有一点需求，需要可以离线使用。正好Redux提供了可以存储和缓存方面的功能。用fb教程的话来说：“Redux提供了功能和易用的最佳平衡”。
很多的公司虽然使用了React，但是没有使用Flow。这里有来介绍flow的使用方法。Flow是fb为了保证js开发的时候能尽早，尽可能多的发现错误而开发的一款开源工具。
有很多的js错误，你不需要在代码运行起来以后才发现错误。只要几个flow命令就可以检测出来。如果使用Nuclide，这个React专用的开发工具的话，Flow会在你写完代码之后就给出提示。非常有帮助。
这些应用开发的只是，以及开发对于开发一款React Native应用都有非常大的帮助。F8是一个开发和几个帮忙的设计开发出来的App。其中所使用的开发知识，第三方库和开发工具对于开发React尤其是React Native应用来说不是必不可少、也是非常有益的。学习掌握他们对于我们以后的开发都是大有裨益的！
随笔 - 390
Trackbacks - 0老人有些困倦，将双脚伸进了炉堂取暖。
哪知气温骤降，海浪一波波往上冲刷着车辆。
声明：本文由入驻搜狐公众平台的作者撰写，除搜狐官方账号外，观点仅代表作者本人，不代表搜狐立场。
　　来自俄罗斯新西伯利亚的开发者Dima日前在GitHub上开源了一款名为React Native Desktop的开发利器，可以让开发者使用React Native构建OS X桌面应用程序，并分享了自己研发所得的示例，项目截至目前已经收获了五千多star。
　　示例代码：
　　&View&&ButtononClick={()=&alert('clicked')} /& &/View&
　　演示截图：
　　不过，Dima也在README.md中声明：“强烈建议有React Native开发经验的开发者使用。截至目前，还没有成功诞生任何RN桌面应用，因此使用React Native Desktop并不是一定能开发出跑在OS X上的原生应用。”
　　第一时间掌握最新移动开发相关信息和技术，请关注mobilehub公众微信号（ID: mobilehub)。
欢迎举报抄袭、转载、暴力色情及含有欺诈和虚假信息的不良文章。
请先登录再操作
请先登录再操作
微信扫一扫分享至朋友圈
搜狐公众平台官方账号
生活时尚&搭配博主 /生活时尚自媒体 /时尚类书籍作者
搜狐网教育频道官方账号
全球最大华文占星网站-专业研究星座命理及测算服务机构
CSDN是中国软件开发联盟（Chinese softwar...
3404文章数
主演：黄晓明/陈乔恩/乔任梁/谢君豪/吕佳容/戚迹
主演：陈晓/陈妍希/张馨予/杨明娜/毛晓彤/孙耀琦
主演：陈键锋/李依晓/张迪/郑亦桐/张明明/何彦霓
主演：尚格?云顿/乔?弗拉尼甘/Bianca Bree
主演：艾斯?库珀/ 查宁?塔图姆/ 乔纳?希尔
baby14岁写真曝光
李冰冰向成龙撒娇争宠
李湘遭闺蜜曝光旧爱
美女模特教老板走秀
曝搬砖男神奇葩择偶观
柳岩被迫成赚钱工具
大屁小P虐心恋
匆匆那年大结局
乔杉遭粉丝骚扰
男闺蜜的尴尬初夜
客服热线：86-10-
客服邮箱：RN&混合开发目前遇到的坑
学习ReactNative恐怕是最让我恼火的一门技术吧，在开发RN的过程中总是会遇到各种坑，想像不到的坑。中间有许多坑我都已经忘了是怎么解决的。
官方教程android 和react-native 混合开发
按照这个教程开发100%会死掉。
注意在npm init
时如果不知道参数的含义就默认设置
<img STYLE="width: 369 height:" DATA-EN-IMG-SELECTED="true"
ALT="RN&混合开发目前遇到的坑"
TITLE="RN&混合开发目前遇到的坑" />
<img STYLE="width: 369 height:font-family:'Helvetica neue';font-size:14.281" DATA-EN-IMG-SELECTED="true"
ALT="RN&混合开发目前遇到的坑"
TITLE="RN&混合开发目前遇到的坑" />
前期准备：
在AndroidManifest.xml中添加设置activity的权限
android:name="com.facebook.react.devsupport.DevSettingsActivity"/&
2）. 在app
build.gradle中修改support的依赖版本：
compile&'com.android.support:appcompat-v7:23.0.1'
3）.npm start
开启服务器
4）. 手机摇动，设置调试的IP地址和端口
做完这些工作之后下面就是解决坑的过程。&
<img STYLE="height:font-family:'Helvetica neue';font-size:14.281" WIDTH="260" DATA-EN-IMG-SELECTED="true"
ALT="RN&混合开发目前遇到的坑"
TITLE="RN&混合开发目前遇到的坑" />
<img STYLE="height:" WIDTH="260" DATA-EN-IMG-SELECTED="true"
ALT="RN&混合开发目前遇到的坑"
TITLE="RN&混合开发目前遇到的坑" />
在网上找了大量的资料都说是要打开服务器，设置调试地址，然并卵。
最后查看package.json文件发现自动生成的json文件中并没有对react的依赖。
"dependencies": {
& "react-native": "^0.26.3",
<img STYLE="width: 621 height:" DATA-EN-IMG-SELECTED="true"
ALT="RN&混合开发目前遇到的坑"
TITLE="RN&混合开发目前遇到的坑" />
当时我没有留意到这个警告，结果在后期一直解决上述问题。
"dependencies": {
& &"react": "^15.0.2",
& "react-native": "^0.26.3",
然后使用npm install —save
react@15.0.2。这个问题才得到解决。
<img STYLE="height:font-family:'Helvetica neue';font-size:13.516" WIDTH="146.34" DATA-EN-IMG-SELECTED="true"
ALT="RN&混合开发目前遇到的坑"
TITLE="RN&混合开发目前遇到的坑" /><img WIDTH="162.95" STYLE="height:font-family:'Helvetica neue';font-size:13.516" DATA-EN-IMG-SELECTED="true"
ALT="RN&混合开发目前遇到的坑"
TITLE="RN&混合开发目前遇到的坑" />
解决了上一个问题之后又出现了如下的问题，在网上找到一个相关的解决办法：
说实话我也不知道这是什么问题...
这些问题解决之后的package.json内容是：
& "name":&"apprn",& "version":&"1.0.0",& "description":&"",& "main":&"index.js",& "scripts":&{
& & "test":&"echo&\"Error:&no&test&specified\"&&&&exit&1",
& "start":&"node&node_modules/react-native/local-cli/cli.js&start"
},& "author":&"",& "license":&"ISC",& "dependencies":&{
& & "react":&"^0.14.8",& &
"react-native":&"^0.25.1"& }
github的地址是：
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。

我要回帖

更多关于 react native 中文 的文章

 

随机推荐