VrButton(按钮)

这个组件是用来管理gaze按钮的交互的状态机制,默认情况没有显示的,只是扮演捕获事件的外壳,它也可以和View一样包裹其它子组件。

<VrButton

  style={{width: 0.7}}

  onClick={()=>this._onViewClicked()}>

  <Image style={{width:1, height:1}}

    source={{uri:'../../Assets/Images/gaze_cursor_cross_hi.png'}}

    inset={[0.2,0.2,0.2,0.2]}

    insetSize={[0.05,0.45,0.55,0.15]}

  </Image>

</VrButton>

按钮的机制如下:

+-------------+

|  FOCUS_OUT  | <---------------------------------------------------------+

+-------------+ <--------------------+                                    |

  +        ^                         |                                    |

  | ENTER  | EXIT                    | EXIT                           EXIT|

  v        +                         +                                    +

+-----------+  KEY_PRESSED  +----------------+ LONG DELAY+---------------------+

| FOCUS_IN  | +-----------> | FOCUS_IN_PRESS | +-------> | FOCUS_IN_LONG_PRESS |

+-----------+               +----------------+           +---------------------+

  ^        ^                         +                                    +

  |        |     KEY_RELEASED        |                                    |

  |        +-------------------------+          KEY_RELEASED              |

  +-----------------------------------------------------------------------+


标准组件分发点击事件:

下面的几个输入事件在VrButton中是默认的:

   -  XBOX游戏手柄的A键

   -  键盘的空格键

   -  鼠标左键

   -  在屏幕上触摸

当你和VrButton交互时,可以播放声音的,这些生意可以用asset(),也可以用 {'{u'}ri: 'PATH'}

因为不同的浏览器支持不同的音频格式,你可以设置不同格式的音源,React VR会选择最匹配浏览

器的进行播放

<VrButton

  onClickSound={'{{'}

   ogg: asset('click.ogg'),

   mp3: asset('click.mp3'),

}}>

具体可以看左侧的 VrSoundEffects API

属性

      View props...   查看左侧导航的"View"的属性
disabled   PropTypes.bool

如果为 true 的话,组件不能互动不能点击的。

ignoreLongClick?   PropTypes.bool

如是true,长按不会触发onLongClickonClick,默认是false

longClickDelayMS?   PropTypes.number

长按点击的延时时间

onButtonPress?   PropTypes.func

当按钮聚焦了,按键按下时触发

onButtonRelease?   PropTypes.func

当按钮聚焦了,按键释放时触发

onClick   PropTypes.func

短时点击事件或没有长按事件的回调

onClickSound   PropTypes.object

点击或者enter/exit事件触发的单次响声的URLs,格式是{'{'}uri: 'http'}

onEnter   PropTypes.func

按下enter键的回调

onEnterSound   PropTypes.object

当主注视或者光标移到button上,播放的音频资源

onExit   PropTypes.func

按下Exit键的回调

onExitSound   PropTypes.object

当眼球或者光标移出button时,播放的音频资源

onLongClick   PropTypes.func

长按点击事件的回调

onLongClickSound   PropTypes.object
style   style
      Layout Props...  查看左侧导航的"布局属性"
      Shadow Props...
      Transforms...  查看左侧导航的"三维坐标、变换"
      backgroundColor   color
      borderBottomLeftRadius   number
      borderBottomRightRadius   number
      borderBottomWidth   number
      borderColor   color
      borderLeftWidth   number
      borderRadius   number
      borderRightWidth   number
      borderTopLeftRadius   number
      borderTopRightRadius   number
      borderTopWidth   number
      borderWidth   number
      opacity   number