改变renderer在GLView的位置

在 React Native 中，使用 `react-native-webgl` 库创建 Three.js 渲染器时，可以通过在 `GLView` 组件外层包裹一个 `View` 组件，并设置该 `View` 组件的样式来调整渲染器在屏幕中的位置。

具体的实现方式如下：

import React, { useRef, useEffect } from 'react';
import { View } from 'react-native';
import { GLView } from 'react-native-webgl';
import * as THREE from 'three';

const Example = () => {
  const rendererRef = useRef(null);

  useEffect(() => {
    if (rendererRef.current) {
      const renderer = rendererRef.current.getContext('webgl', { antialias: true });
      renderer.setSize(window.innerWidth, window.innerHeight);

      const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      camera.position.z = 5;

      const scene = new THREE.Scene();
      const geometry = new THREE.BoxGeometry(1, 1, 1);
      const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
      const cube = new THREE.Mesh(geometry, material);
      scene.add(cube);

      const animate = () => {
        requestAnimationFrame(animate);
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
        renderer.render(scene, camera);
      };

      animate();
    }
  }, []);

  return (
    <View style={{ position: 'absolute', top: 50, left: 50 }}>
      <View style={{ width: 300, height: 300 }}>
        <GLView style={{ flex: 1 }} ref={rendererRef} />
      </View>
    </View>
  );
};

export default Example;

在上面的代码中，我们将 `GLView` 组件放在了一个 `View` 组件中，并设置了该 `View` 组件的样式来调整渲染器在屏幕中的位置。需要注意的是，由于 `GLView` 组件是异步加载的，因此我们需要在 useEffect 中等待它被加载完毕之后才能对其进行操作。

最后，我们通过 `renderer.render(scene, camera)` 方法将场景渲染到屏幕上，并通过 `requestAnimationFrame` 实现了动画效果。