React-AR概述

Posted 2020-09-26 这人是胖子

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动态获取平台的width和height或者对组建添加样式属性width和height来进行布局(例如：就像添加 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代码。