ReactVRでテキストフォームぽいものを作る

イメージ

ソースコード

<View style={{
  flex: 1,
  flexDirection: 'column',
  width: 2,
  alignItems: 'stretch',
  transform: [{translate: [-1, 1, -5]}],
}}>
  <View style={{ margin: 0.1, height: 0.1}}>
    <Text style={{fontSize: 0.2, textAlign: 'center'}}>Name</Text>
  </View>
  <VrButton
    onClick={() => onClick('name') }
    >
    <View style={{ margin: 0.1, height: 0.3, backgroundColor: bgColor}}>
      <Text style={{fontSize: 0.2, textAlign: 'center', color: 'gray'}}>{text}</Text>
    </View>
  </VrButton>

  <View style={{ margin: 0.1, height: 0.1}}>
    <Text style={{fontSize: 0.2, textAlign: 'center'}}>Email</Text>
  </View>
  <VrButton
    onClick={() => onClick('email') }
    >
    <View style={{ margin: 0.1, height: 0.3, backgroundColor: bgColor}}>
      <Text style={{fontSize: 0.2, textAlign: 'center', color: 'gray'}}>{text}</Text>
    </View>
  </VrButton>

  <VrButton
    onClick={() => { console.log('click') }}
    >
    <View style={{ margin: 0.1, height: 0.3, backgroundColor: 'blue'}}>
      <Text style={{fontSize: 0.2, textAlign: 'center'}}>Send</Text>
    </View>
  </VrButton>
</View>

こんな感じで実装できた

学び

ViewタグはWebのdivタグと用途はほぼ同じ

• レイアウトしたり背景色をつけたりしたい要素をViewタグで囲む
• ReactVRでは幅・高さを0-1の範囲で調整するのが基本。単位はメートルらしい。
• ユーザーのクリックやフォーカスアウトのようなイベントをとりたい時はVrButtonで囲む
• 全体のレイアウトやflexboxで指定している。開発中にとりあえず配置したい時は便利

これから

• フォーカスした時のカーソルのアニメーションとかキーボード入力できるような調整をしていく