Hello World

也和其他语言一样,我们学习VR的第一个项目也从“hello”开始,你也可以在 index.vr.js 中查

看源码. 这个js文件是你的React VR 应用的入口.

'use strict';

import React from 'react';

import { AppRegistry, asset, Pano, Text, View } form 'react-vr';


class WelcomeToVR extends React.Component {

  render() {

    // Displays "hello" text on top of a loaded 360 panorama image.

    // Text is 0.8 meters in size and is centered three meters in front of you.

    return

      <View>

        <Pano  source={asset('chess-world.jpg')} />

        <Text

          style={{

            backgroundColor: '#777879',

            fontSize: 0.8,

            layoutOrigin: [0.5,0.5],

            paddingLeft: 0.2,

            paddingRight: 0.2,

            textAlign: 'center',

            textAlignVertical: 'center',

            transform: [{translate: [0,0,-3]}],

          }}>

          hello

        </Text>

      </View>

    )

  }

};


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

React应用被分成好多个小组件-结构标签,这些组件也就是应用要渲染的或者要更新的,这段

代码代表最外层也是最高级别的组件,WelcomeToVR, 并决定如何进行渲染。


代码从导入依赖开始,接着声明 WelcomeToVR 组件(包括如何渲染),代码以注册AppRegistry

束。最后一部分只有在最外层的组件才需要加上。


return内部的内容和js不完全一样,像<View>,<Pano>,he <Text>这些都是利用JSX声明的,一种在

js内部植入类似XML结构的语法,JSX可以清晰的展现你的UI,下面将讨论更多的内容


我们再看一下组件的结构,首先我们返回一个 View 组件,它有两个子组件: PanoText:

· Pano 创建的盒子用来渲染一张360度的图片,简单的来说就是在VR中渲染的周围环境

· Text 3D空间里面渲染的文字,这个 Text 标签以一定的样式在你的世界中心占据很大的空间,

   我们可以重新设置其他的样式属性 .

· View 这是一个包裹其他组件的容器,我们上面的代码就是在 View 中包裹了Text Pano .


每一个React组件必须返回一个单一的元素,所以有两个子组件的必须要包裹在 View 中.


你把代码修改下,就知道代码的作用了。在开始中,我们创建了一个叫 WelcomeToVR 的项目,你可

以把“hello”改成“welcome”,然后用 Text 标签包裹起来,如果你的npm还在运行,刷新浏

览器就能看到结果了。

JSX and ES6 ?

现在的web开发都很依赖解析JS的工具,这样做得原因也有很多,比如把多个JS文件打包在一

起和实现新语言特性,这也就是React命令接口做的事儿,转换成JSX和ES6。

· JSX 继承了类似XML的JS,你可以用像html样的一种嵌套集来写代码,JSX会更容易些,在

   React网站可以查看更多信息. 如果你要用标准的JS,也可以 use React without JSX.

· ES6, 也就是 ES2015, ECMA Script6的标准,是JavaScript的改进版本. 现在是官方标准

   的一部分,但是并不是所有的浏览器都支持,所以经常需要转换下,React Native现在支持了

   ES2015,上面讲的很多都是ES2015的特征,比如: import , from , class , extends , import ,

   () => 等,这一页 讲了很多ES2015特性.


<Text style={"{{"} fontSize: 0.8, ...{"}}"}>hello</Text>这样的代码就是用JSX写的, 但是他们最终

都会被转换成JavaScipt. 更多的信息可以查看左侧导航栏上的 React VR综述下面的内容.

AppRegistry

我们的Hello World例子以一个新的 Component 定义 WelcomeToVR,并用 AppRegistry 注册,

AppRegistry 告诉React VR哪个组件是整个应用的根组件,你不需要了解 AppRegistry 很多,整

个应用中只调用了 AppRegistry.registerComponent 一个方法,你只需要把上面的代码拷贝到你

index.vr.js 文件中就可以运行了。


当你创建一个React VR应用时,可能创建很多新的组件,你在屏幕上看到的任何东西都是某种形式

的组件。组件可以很简单,它唯一需要做的就是一个 render 函数,这个函数返回要渲染的JSX