Question

如何在功能组件（expo 相机）中使用 ref

2020-08-23

7103

javascript react-native expo

我将相机作为功能组件进行响应，但文档中说

To use methods that Camera exposes one has to create a component ref and invoke them using it.

但在响应文档中说我不能在功能组件中使用 ref 。

这是否与 useRef 相同？我试图让相机拍照并将其保存到手机内存中。

    <Camera
    style={{ flex: 1 }}
    type={type}
    useCamera2Api={true}
    ratio={"16:9"}

//to take a picture
    ref={ref => {
    this.camera = ref;
  }}
  >

...

 <TouchableOpacity
        style={{
          alignSelf: 'flex-end',
          alignItems: 'center',
              backgroundColor: 'transparent',
            }}
            onPress={() => async () => {
  if (this.camera) {
    let photo = await this.camera.takePictureAsync();
  }}
      >
        <FontAwesome
          name="camera"
          style={{ color: "#fff", fontSize: 40 }}
        />
      </TouchableOpacity>

Answer 1

您可以创建一个变量并用 useRef 进行分配

const cameraRef = useRef(null)

然后在 ref 字段中使用 cameraRef ，如下所示：

<Camera 
   ref = {cameraRef} 
/>

然后在您的 TouchableOpacity 中，您可以像这样进行操作：

if (cameraRef) {
   const data = await cameraRef.current.takePictureAsync();

Answer 2

const [cameraRef, setCameraRef] = useState(null)

<Camera
  ref={(ref) => {
     setCameraRef(ref)
   }}
 />

uzai sindiko

2020-09-23