代码改变世界

facebook开源React Native,可以用JS开发原生IOS应用

2015-03-27 14:26 by Mirana, 419 阅读, 0 推荐, 收藏, 编辑

最近facebook开源了React Native,可以基于React.js开发原生的IOS和Android应用,并且已经有上线的应用Facebook group。
javascript也可以写原生的ios应用了,离js统一世界又进了一步,激动。。

##Getting Started

###Requirements

1. OS X,目前react native只有IOS版,而且Xcode只能在mac上用。
2. Xcode
3. homebrew,可以用来安装node,watchman,flow
4. brew install node
5. brew install watchman
6. brew install flow

###Quick Start

npm install -g react-native-cli
react-native init react_ios

这就创建了一个空的工程,进入目录,打开react_ios.xcodeproj,修改index.ios.js。
command+r就可以运行了。

附index.ios.js代码,把react.js里虚拟dom的概念搬到了ios里,UI提供了类似flexbox的布局,并实现了css的子集。

/**
* Sample React Native App
* https://github.com/facebook/react-native
*/
'use strict';

var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
} = React;

var react_ios = React.createClass({
render: function() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js{'\n'}
Press Cmd+R to reload
</Text>
</View>
);
}
});

var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
},
});

AppRegistry.registerComponent('react_ios', () => react_ios);

原文:http://www.mirana.me/blog/55150b8ce1382362097499a3

Extjs 4.2 MVC+ThreeJs学习笔记(四)bumpmap 凹凸贴图

2013-12-12 01:05 by Mirana, 1324 阅读, 0 推荐, 收藏, 编辑
摘要:bump mapping(凹凸贴图) 凹凸贴图是指计算机图形学中在三维环境中通过纹理方法来产生表面凹凸不平的视觉效果。它主要的原理是通过改变表面光照方程的法线,而不是表面的几何法线来模拟凹凸不平的视觉特征,如褶皱、波浪等等。凹凸贴图的实现方法主要有:偏移向量凹凸纹理和改变高度场。 这是一种在3D场景中模拟粗糙表面的技术,将带有深度变化的凹凸材质贴图赋予3D物体,经过光线渲染处理后,这个物体的表面就会呈现出凹凸不平的感觉,而无需改变物体的几何结构或增加额外的点面。例如,把一张碎石的贴图赋予一个平面,经过处理后这个平面就会变成一片铺满碎石、高低不平的荒原。当然,使用凹凸贴图产生的凹凸效果其光影.. 阅读全文

Extjs 4.2 MVC+ThreeJs学习笔记(三)Shader(着色器)

2013-12-10 15:34 by Mirana, 3142 阅读, 0 推荐, 收藏, 编辑
摘要:Shader的定义 维基百科中Shader的定义是:应用于计算机图形学领域,指一组供计算机图形资源在执行渲染任务时使用的指令。程序员将着色器应用于图形处理器(GPU)的可编程流水线,来实现三维应用程序。这样的图形处理器有别于传统的固定流水线处理器,为GPU编程带来更高的灵活性和适应性。通俗来说Shader就是运行在GPU中的一段代码,只管3D模型什么时候是什么颜色的程序,这样3D场景的渲染降低了对于CPU的依赖,变相增加了程序的性能。 Shader的种类 在Direct3D和OpenGL中有以下3种Shader: 顶点着色器:处理每个顶点,将顶点的空间位置投影在屏幕上,即计算顶点的... 阅读全文

Extjs 4.2 MVC+ThreeJs学习笔记(二)一个简单的ThreeJS场景

2013-08-29 15:36 by Mirana, 913 阅读, 0 推荐, 收藏, 编辑
摘要:ThreeJS基本要素在我们用ThreeJS创建的3D世界里,会有很多的元素,然而以下四个是最基本的元素,也就是说只要包含了这些元素,就可以渲染出一个场景。一个Scene(场景)一个renderer(渲染器)一个camera(镜头)一个object(模型对象)浏览器以我的经验来看,Google的Chrome浏览器是表现最优秀的浏览器,没有之一。Chrome支持Canvas,WebGL和SVG。Firefox是第二选择,Opera也支持WebGL,Mac上的Safari只需要开启WebGL设置,IE目前不支持WebGL需要添加插件(IE11据说会支持)。强烈推荐大家使用Chrome浏览器。场景要 阅读全文

Extjs 4.2 MVC+ThreeJs学习笔记(一)ThreeJs简介

2013-08-29 00:03 by Mirana, 1025 阅读, 0 推荐, 收藏, 编辑
摘要:WebGLWebGL是Khronos协会正在制定的一种3D绘图标准,它是一个跨平台的、开源的Web浏览器3D绘图API。它是由Mozilla基金会原创,目前由Khronos协会下由Google、Opera、Mozilla和Apple等主流浏览器公司开发人员和其他三维图形开发者形成的WebGL Working Group开发。WebGL基于OpenGL ES 2.0标准,并使用OpenGL着色语言GLSL,而且还提供了类似于标准的OpenGL的API。WebGL运行与HTML 5的Canvas元素中,WebGL与HTML中所有的DOM接口集成,它也是一个DOM API,这就是说它可以被任何与DO 阅读全文
点击右上角即可分享
微信分享提示