首页 > 代码库 > React-AR概述

React-AR概述

JSX和声明式的UI

使React能够吸引人的一个特性是它以声明式的UI和优雅的方式来进行代码操作。UI元素就像HTML标签一样通过组建来描述。例如:这个标签<Greeting name=‘Joe‘/> 带了一个参数,它描述了向谁问候的这么一个组建。这些标签可以用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的使用不是必须的,但是为了提供可读性,建议使用JSX语法。

React重要的概念

  • Components - 组件是可以在标签中使用的可重用UI元素,例如:<Greeting/>。React Native提供了像 Text 和 Image 一样的内置组建。从 React.Component 派生出一个类来定义额外的组建。每个组建都有一个返回一系列子组件的 React.Component 方法。
  • Props - 组建可以像 name 在 <Greeting name=‘Rexxar‘/> 中一样作为参数传递,这些参数通常叫做属性或者 props 并且可以通过 this.props 变量访问。name ,在上面的例子中,它可以像 {this.props.name} 这样访问。
  • State - 组建可以保持一个影响组建显示的内部状态。当状态数据变化时,组建就会重新渲染一次。通过React约定,所有可修改的状态都被定义在组件内的 this.state 对象内,并且只能通过专用的 setState 函数进行修改,例如:
    this.setState({myStateVariableCounter : 10})
  • Events - 组件可以生成在某些UI操作时触发的事件。例如:当光标进入和退出它的区域时,View 组件分别生成 onEnter 和 onExit 事件,这些事件可以在组建声明时通过添加属性的方式进行交互处理,例如:
    <View onEnter={() => this.setState({hasFocus: true})}>
  • Layout - React使用flexbox算法和布局规则在2D平面内自动定位组件。此布局通过组建的dimensions动态获取平台的widthheight或者对组建添加样式属性widthheight来进行布局(例如:就像添加 alignItems 样式属性一样)。
  • Style - 样式对象可以控制组建的外观和布局。他们通常通过指定一个样式对象。例如:
    <View style={{width: 100, height: 100, backgroundColor: ‘skyblue‘}}/>

通过 StyleSheet.create ,可以将样式对象放到外部来声明,而不是直接通过内联样式。这种外部样式可以提供样式代码的复用性。虽然React StyleSheet对象与CSS共享一些属性名称,但它们并无直接的关系。

React 生态系统

尽管最初是为了简化Web的开发而开发的,但React生态系统已经发展到包括几种类型:

  • React - 原始库,它主要用于创建支持浏览器渲染的DOM组建。
  • React Native - 通过原生组建的使用来开发基于iOS和Android的原生应用程序。React Native是基于React 研发。
  • React VR - React VR用于在VR中开发UI。React VR基于React Native研发。

尽管它React VR运行在浏览器中,React VR和React Native的相同之处却多于React,因为它支持和React Native一样的更多的组建,比如:<View><Text>。除了2D布局,它还引入了3D场景,变换和全景图的概念,允许将对象放置在3D空间中并在VR中渲染。
明智的是,React VR使用一个简单的OVRUI库,这个库使用了流行的Three.js JavaScript 3D引擎。Three.js在浏览器内部运行,并通过WebGL渲染场景。通过Web VR API提供对VR头盔的访问,可以在Rift,GearVR或其他设备上显示。然而,React VR并不需要VR头盔来运行,在浏览器和手机也可以享有360度的VR体验。

React Native Packager

React JavaScript代码在它通过浏览器运行之前都会提前进行预处理。预处理的执行都是通过React Native packager来执行。React Native Packager和Browserify 、 Webpack类似,并且它提供了一个像CommonJS的模块系统,JavaScript 编译(ES6,Flow,JSX),bundling, 和 asset loading。

对于React VR,我们使用两个关键命令。

  • bundle : 将JavaScript文件进行处理,转换和合并为一个单一的JavaScript静态文件。

  • start : 启动React Native包以充当Web服务器和JavaScript文件动态转换成包文件。

npm start 这个命令是启动package包的命令,它是下面命令的快捷方式。

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

在这种模式下,packager对于大多数的内容来讲,它就像一个本地的服务器,更重要的是,它能够自动将React 和JSX的代码转换成浏览器支持的JavaScript代码。你可以在你的项目中运行 npm start 这个命令,并且在浏览器中打开http://localhost:8081/index.vr.bundle?platform=vr 以查看效果。

对于静态网站,您需要保存生成的内容。 [npm run bundle](docs / publishing.html)使用以下命令来完成此操作:

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文件包含可以由HTML 的 script 标签直接运行的JavaScript代码。

React-AR概述