首页 > 代码库 > 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
动态获取平台的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代码。
React-AR概述