发帖    主题    评论    推荐    标签    作者    订阅    查搜    注册   登陆   关注
 
面向对象 设计模式 领域驱动设计 企业架构 框架 开发教程 微服务 大数据 扩展性 并发编程 事件驱动 分布式 SOA

使用React Native的第一印象

                   
2015-02-07 09:12
赞助商链接

Facebook提供了一种编写原生移动应用的效果的框架,称为:React Native,你可以使用Javascript编写可媲美原生iOS或安卓组件的效果。

James Long在过去几个月研究学习了Ember, Angular, 和 React,得到了很多Web组件的思想,这些框架都是以不同方式解决类似的问题,有些是冲突,有些是可和谐相处的。

James Long主要关心数据绑定和组件化componentizing UI,在研究了上面这些技术框架后,他认为React提供了最好的解决方案。

James Long在First Impressions using React Native一文中描述了如何使用React Native在浏览器实现3D等原生应用程序才能开发的效果。

React Native还没有完全开源,Facebbook正在进行清理代码等准备工作,他们应该会更快地开源。

关于跨平台原生应用目前主要由JavaScript. Titanium, PhoneGap驱动,这些项目都有一个短处,要么你将Web应用包装在一个Web浏览器中,要么他们试图模仿HTML/CSS,然后,你换可以直接和原生对象交互,但是这容易造成很大性能问题,React Natice实际在单独线程实现布局layout,这样主线程是自由的,能够聚焦一些平滑的动画等。

React Native使用JavaScriptCore 在iOS中运行Javascript,最重要部分是它以单独线程运行Javascript(Titanium也是这么做),你能使用Javascript编写组件,就像你在使用React.js一样,除了不使用div和a,而是使用View和Text,你能得到React所有构建UI的组合优点。

React Native会获取你的UI然后发送少量的数据到主线程,使用原生组件来渲染界面,View是一个UIView,最精彩的是你不必关心更新UI,你只要基于一些状态声明渲染即可,React会使用不同算法计算你的改变和实际界面之间的差别,然后只发送这种差别数据到实际界面进行渲染。(注:这是React.js最核心的一部分,体现效果是速度性能快)

编写原生UI从来都不是很容易,而使用JS编写动画不会有性能问题,因为JS运行在单独线程。

该文展示了一个使用React Native编写的OpenGL 3D应用:



实现代码也很简单,试图渲染部分:


var ObjList = React.createClass({
// a few methods clipped....

selectModel: function(file) {
//调用Objective-C方法
controller.loadMesh(file);
},

renderRow: function(file) {
return View(
null,
TouchableHighlight(
{ onPress: () => this.selectModel(file),
underlayColor: 'rgba(0, 0, 0, .6)' },
Text({ style: { height: 30, color: 'white' }}, file)
)
);
},

render: function() {
var source = this.getDataSource(this.props.files);

return ListView({
style: { flex: 1 },
renderRow: this.renderRow,
dataSource: source
});
}
});



7
2015-02-09 15:36

很期待这个技术

移动应用      iOS      reactjs      javascript     

赞助商链接

赞助商链接

返回顶部

移动版 关于本站 使用帮助 联系管理员 最佳分辨率1366x768
OpenSource JIVEJDON Powered by JdonFramework Code © 2002-20 jdon.com