无法让 react-three/fiber 在我的 react-native 项目中渲染画布

Question

我有一些应用程序，有一些代码与多个页面。在一页上，我想要一个three画布。

我有一些像这样的代码。

export const MyScreen = ({navigation}) => {
return (
<View>
<SomeHeader navigator={navigation}/>
<View style={styles.canvas}>
<MyCanvas/>
</View>
</View>
);

那么我也有这个代码

export class MyCanvas extends React.Component {
render() {
// This reference will give us direct access to the mesh
const mesh = useRef()
// Set up state for the hovered and active state
const [hovered, setHover] = useState(false)
const [active, setActive] = useState(false)
// Rotate mesh every frame, this is outside of React without overhead
useFrame(() => (mesh.current.rotation.x += 0.01))
return (
<Canvas>
<mesh
{...props}
ref={mesh}
scale={active ? 1.5 : 1}
onClick={(event) => setActive(!active)}
onPointerOver={(event) => setHover(true)}
onPointerOut={(event) => setHover(false)}>
<boxGeometry args={[1, 2, 3]} />
<meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
</mesh>
</Canvas>
);
}
}

导致这个错误

未捕获错误:无效钩子调用。钩子只能在函数组件的内部调用。这可能是由于以下原因之一:

钩子不是在函数组件的主体中吗?我困惑。

Answer 1

MyCanvas是一个类组件，因为它扩展了React.Component。

就你而言，我猜你想要的是:

function MyCanvas() {
const mesh = useRef()
const [hovered, setHover] = useState(false)
const [active, setActive] = useState(false)
useFrame(() => (mesh.current.rotation.x += 0.01))
return (
<Canvas>
<mesh
{...props}
ref={mesh}
scale={active ? 1.5 : 1}
onClick={(event) => setActive(!active)}
onPointerOver={(event) => setHover(true)}
onPointerOut={(event) => setHover(false)}>
<boxGeometry args={[1, 2, 3]} />
<meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
</mesh>
</Canvas>
);
}

反应文档有更多的细节,同样的错误。https://reactjs.org/warnings/invalid-hook-call-warning.html

然而，上述错误与r3f无关。但r3f可能无法与React Native一起工作。根据我最初的研究，Github的仓库和一个开放的公关计划在版本8发布上有一些问题https://github.com/pmndrs/react-three-fiber/pull/1384

https://github.com/pmndrs/react-three-fiber/pull/1699