如何根据react-360中的摄像头位置更改组件的位置？

import React from 'react';
import { AppRegistry, View, Text, VrButton, NativeModules } from 'react-360';

const { SurfaceModule } = NativeModules;

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      cameraPosition: { x: 0, y: 0, z: 0 },
      componentPosition: { x: 0, y: 0, z: -3 }, // 初始位置
    };
  }

  componentDidMount() {
    const { r360 } = this.props;
    const cameraPosition = r360.getCameraPosition();
    this.setState({ cameraPosition });
  }

  componentDidUpdate() {
    const { r360 } = this.props;
    const cameraPosition = r360.getCameraPosition();
    if (this.state.cameraPosition !== cameraPosition) {
      const componentPosition = this.calculateNewPosition(cameraPosition);
      this.setState({ cameraPosition, componentPosition });
    }
  }

  calculateNewPosition(cameraPosition) {
    // 根据摄像头位置计算新的组件位置
    const { x, y, z } = cameraPosition;
    const newX = x + 1; // 在x轴上向右移动1个单位
    const newY = y; // 在y轴上不变
    const newZ = z; // 在z轴上不变
    return { x: newX, y: newY, z: newZ };
  }

  render() {
    const { componentPosition } = this.state;
    return (
      <View style={{ transform: [{ translate: componentPosition }] }}>
        <Text>Hello, React 360!</Text>
      </View>
    );
  }
}

AppRegistry.registerComponent('MyComponent', () => MyComponent);
SurfaceModule.createRootView('MyComponent');