布局样式

React VR用的flex布局来自动把组件和子组件放到空间里面的。

我们用的也是 CSSLayout ,也让用法尽可能的和web开发上的一样。CSSlayout默认的属性做了些

改变,这些改变也可以在浏览器环境下测试

布局示例

大多数情况下,子组件在垂直方向布局用'column',水平方向用'row',它和size、alignment一样都

是通过组件style属性控制的。

下面就是最常用的属性

·  flexDirection - 值可以是 columncolumn
·  justifyContent - 值可以是 flex-startspace-aroundspace-between
·  itemAlign - 值可以是 stretchflex-startcenterflex-end
·  margin - 在item周围的制定空间大小

这些属性在LayoutSample例子里,就是下面的图片战士的内容一样,几个按键垂直排列着。

颜色按钮的代码在下面:

render() {

   // <View> below creates a view that is 2 meters wide and is positioned

   // 5 meters in front of the user (z = -5). Its child items are laid out

   // in a 'column' and marked to 'stretch' to the width of the view container.

   // This causes call child view to have the same width.

  return (

    <View>

      <Pano source={asset('office_lobby.jpg')}/>

      <View style={{

        flex: 1,

        flexDirection: 'column,

        width: 2,

        alignItems: 'stretch',

        transform: [{translate: [-1, 1, -5]}],

      }}>


      <View style={{ margin: 0.1, height: 0.3, backgroundColor: 'red'}}>

        <Text style={{fontSize: 0.2, textAlign: 'center'}}>Red</Text>

      <View>

      <View style={{ margin: 0.1, height: 0.3, backgroundColor: 'orange'}}>

        <Text style={{fontSize: 0.2, textAlign: 'center'}}>Orange</Text>

      <View>

      <View style={{ margin: 0.1, height: 0.3, backgroundColor: 'yellow'}}>

        <Text style={{fontSize: 0.2, textAlign: 'center'}}>Yellow</Text>

      <View>

      <View style={{ margin: 0.1, height: 0.3, backgroundColor: 'green'}}>

        <Text style={{fontSize: 0.2, textAlign: 'center'}}>Green</Text>

      <View>

      <View style={{ margin: 0.1, height: 0.3, backgroundColor: 'blue'}}>

        <Text style={{fontSize: 0.2, textAlign: 'center'}}>Blue</Text>

      <View>


    <View>

    <View>

  );

}

更多布局资料,请查看React Native的Layout with Flexbox

style

React VR没有用单独的语言或者语法来定义样式,所有的核和VR组件都接受一个style的属性,下面就是示例:

<View style={{

    flex: 1,flexDirection: 'column,

    width: 2,

    alignItems: 'stretch',

    transform: [{translate: [-1, 1, -5]],

}}>

样式的键值都和web上的CSS一样,除了用 backgroundColor 代替了CSS中的 background-color.

上面我们在组件行内声明的样式,相对简单些。

随着组件越来越复杂,我们可以用 StyleSheet.create 把样式都定义在一起

const styles = StyleSheet.create({

  bigblue: {

    color: 'blue',

    fontSize: 0.4,

  }

  red: {

    color: 'red',

  },

})

这样的用法可以直接放在style的内部来用:

<Text style={styles.bigblue}>bigblue colored text</Text>

你也可以用数组的形式来写:

<Text style={[styles.bigblue, styles.red]}>red text</Text>

<Text style={[styles.bigblue, {color:'green'}]}>green text</Text>

在style数组中,样式最终被合并在一起,而且数组中最后一个元素的样式会优先展示出来,这样我

们既可以继承父属性,也可以重写这些样式。

宽、高

组件的宽高样式属性决定了它在世界中的大小。

React VR用的是米作为单位的,不像React Native用的是像素,在VR世界中米更重要更符合实际

情况,米同样也用在WebVR APIs里面。

单位

Web版的React VR的长度单位是米