React 360ではまだHookは使えない

TL;DR

React 360にて依存しているReactとReact NativeがHookに対応する前のバージョンのため、React Hookはまだ使えない。Issueには上がっている。

github.com

github.com

package.json も見てみると確かに対応する前のバージョンになっている。

  "dependencies": {
    "react": "16.3.2",
    "react-native": "~0.55.4",
    "three": "^0.87.0",
    "react-360": "~1.1.0",
    "react-360-web": "~1.1.0"
},

気付いたきっかけ

WebVRを試すために、React経験者なら入門しやすそうなフレームワークとしてReact 360を触れてみたけど、カウンターアプリのサンプルがClass Componentだったので、Functional ComponentでuseState使って書き換えてみてロードした時点で他のcomponentがレンダリングされなくなった。 検索したら上記のIssueが見つかった。

将来的にどうなるか?

React 360の最新リリースが2018/5/17だったので最新版のReactに対応するのは望み薄いかな?とは思った。

Release React 360 - v1.0.1 · facebook/react-360 · GitHub

が、コアコミッターの人が「WebVR 1.1 APIはレガシーだからWebXR APIに注力して行くよ」と言っているみたいなので、アップデートというよりガラッと中身を変えていきそう。

github.com

そもそも複数componentで個別のState持てない?

ついでに色々試してみる。 チュートリアルのCounterだけ分離してみる

https://facebook.github.io/react-360/docs/explore-code.html

import React from "react";

import { AppRegistry, StyleSheet, View, Text, VrButton } from "react-360";

export class Counter extends React.Component() {
  state = {
    count: 0
  };

  _incrementCount = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <VrButton onClick={this._incrementCount} style={styles.greetingBox}>
        <Text style={styles.greeting}>{`Count: ${this.state.count}`}</Text>
      </VrButton>
    );
  }
}

export class Sample360 extends React.Component {
  render() {
    return (
      <View style={styles.panel}>
        <Counter />
      </View>
    );
  }
}
// style は省略
AppRegistry.registerComponent("Sample360", () => Sample360);

実行コンソール見るとCounterを定義したあたりでエラーが出てる。Counter周りを消してみると無事Panelは表示される。 カウンターをSample360内で定義すると動作するので、Stateを含むComponentを複数持てないのか…? よくわからない…

まとめ

React 360は近々大きなアップデートがありそうな予感がしている。ただ現状ではWebVRを踏み込んでやるなら他の選択肢が良さそう。 Three.jsでいじっていた方が難易度は上がるけど自由にできるみたいで、開発頻度的に活発そうなフレームワークはA-Frame、みたいな印象がある。 まだ手を動かしてないしドキュメントも読んでいないので認識が間違っていそう。 また気が向いたらWebVR/WebXRで遊んでみたい。