React VR 综述

React是FaceBook出的开源JS库,而React VR更上一层楼,可以在虚拟现实中创建UIs和3D场景

这一节讲解的是React VR的一些关键点和概念

JSX 和声明似的 UIs

React的一个吸引人的特性就是它将声明似的元素和代码以一种优雅的方式结合起来,UI 元素通过

组件标签的形式描述,有点儿类似HTML,举个例子,标签 <Greeting name='Joe'/> 描述的就是一

个带有name参数的greeting组件,这些标签通过JSX插入到JavaScript里面。


JSX 是JavaScript的一个语法扩展,它将在React Native包里面处理成JavaScript,JSX比直接用

代码来展现UI更优雅些

<MyButton color="blue" shadowSize={2}>

  Click Me

</MyButton>

编译成:

React.createElement(

  MyButton,

  {color: 'blue', shadowSize: 2},

  'Click Me'

)

用JSX也并非是强制要用的,但是能增强代码的可读性,React官方网站有 JAX的详细说明。

React关键的几个概念

用React需要知道一些术语和一些关键的概念,下面就是几个重要的点:

·  Components - Components(组件) 可以在标签中复用的UI元素, 如<Greeting/>. React Native
    提供了 TextImage 组件. 更多的组件可以重写 React.Component 来声明.每一个组件都有一个
    render() 函数,这个函数返回了一系列的子组件

·  Props - Components(组件) 可以携带像在 <Greeting name='Rexxar'/>里面的name 一样的参数.
    参数就是属性,可以通过 this.props 加上. name获取到,上面的例子中就是{this.props.name}得到
    的,下一节有组件、属性和状态的详细介绍.

·  State - Components(组件) 可维持状态,这个状态可以影响组件的显示,state数据变化了,
组件重新渲染,所有状态都放在 this.state 对象里,通过 setState 函数改变状态,举个例子:
this.setState({myStateVariableCounter : 10)

·  Events - UI的动作发生时,Components(组件)会产生事件,比如 View 有两个事件: onEnter
    onExit ,也就是当你看向或者鼠标指针进入退出这个区域时发生的,我们也就是用这些事
    件来进行交互的。
<View onEnter={() => this.setState({gazeEnabled : true)}>

·  Layout - React是用flexbox算法和布局规则自动地把组件放置到2D平面内的,这个布局是通过
    测量计算组件的宽高,还有其他的样式比如 alignItems来实现的 ,更多的布局样式请查看左侧的
    组件、属性和状态模块

·  Style样式控制着组件的布局和展示效果:
<View style={{width: 100,height: 100,backgroundColor: 'skyblue'}}/>
    属性除了放到组件行内(前端称为内联属性),属性还可以通过StyleSheet.create抽出来放到外
    部来引用,这样外部的style可以在其他组件中复用,效果更好些。

React 生态系统

React最开始是为web开发而生的,现在已经扩展到其他几个领域,形成了React生态系统:

·  React- 最原始的库,主要是为web服务的,创建浏览器渲染的DOM。
·  React Native- 这个是用来开发IOS和Android的移动应用,建立在React的一些内核之上。
·  React VR- 这里讨论的新库,主要是在VR中的UIs开发,建立在React Native框架之上的。

尽管React VR试运行在浏览器上的,相比React Native和React,React VR的结构更像前者,因为

也有<View>和<Text>,除了2D布局,也引入了3D场景、变换、全景,可以把物体放置在3D空间

内,同时在VR中渲染。

React VR用了OVRUI库,这个库是利用Three.jsJS 3D引擎开发,Three.js是在浏览器上开发的,通

过WebGL来渲染场景的。利用Web VR API可以接入到VR眼镜中,然后再Rift、GearVR或者其他设

备上显示出来。React VR可以不用VR眼镜也能在浏览器或者移动设备上创建一个360度的场景。

React Native的几个概念框架同样在VR中也适用,下面就是几个概念的介绍。

React Native包管理器

React JavaScript代码在浏览器上运行之前要预处理下,React Native包管理器就是做这个预处理

的工作的,它与 BrowserifyWebpack 的作用类似,都是提供CommonJS样的模块系统、JS编

译(ES6, Flow, JSX)、打包、加载资源等

React VR的两个常用命令:

·  bundle : 处理、转换、合并JS文件到一个js文件中
·  start : 加载react native包管理,开启一个web服务,动态转换js文件为bundles文件

npm start 就是打开这个管理器,也是下面命令的简写,在package.json文件中有配置:

node node_modules/react-native/local-cli/cli.js start

包管理器表现的就恶化本地web服务一样,也是把React或者JSX的代码转换成js代码,你可以通过

命令npm start运行项目,在浏览器中查看http://localhost:8081/index.vr.bundle?platform=vr

如果要放到网站上,需要打包后的文件,打包命令 npm run bundle 的作用和下面的命令类似:

node node_modules/react-native/local-cli/cli.js bundle --entry-file

index.vr.js --platform vr --dev false --bundle-output

index.vr.bundle

index.vr.bundle里面包含有js代码,可以直接被HTML script 获取并执行

这里我们只讨论项目用到的范围,更多的包管理命令可以查看React Native Packager

联网操作

React VR 用的是Fetch API从网络获取资源的,Fetch和XMLHttpRequest或者其他的APIs。

更过Fetch的用法,要去React Native的官网查看了:Networking

Fetch更全的资料可以去这儿看, the Fetch Request documentation.

也可以去 the Fetch API documentation查看.