如何在 React Native 中隐藏渲染的元素？答案

【问题标题】：How to hide rendered elements in React Native?如何在 React Native 中隐藏渲染的元素？
【发布时间】：2021-08-11 13:14:30
【问题描述】：

我正在制作一个使用相机的 React Native 应用程序。我希望摄像头组件能够渲染和捕获视频，但不想显示摄像头视频的输出。

我可以使用以下代码在 React.js 中做到这一点 -

import React, { useState, createRef } from "react";
import Webcam from "react-webcam";

function Scan () {
  const videoRef = React.createRef();

  return (
    <div>
      <Typography>
        Capturing Video
      </Typography>
      <Webcam
        align="center"
        audio={false}
        mirrored={false}
        id="img"
        ref={videoRef}
        style={{display: "none"}}
      />
    </div>
  );
};

但是，在 React Native（使用托管 Expo 流程）中，当我尝试使用 Expo 相机模块执行相同操作时，它不起作用。除非显示，否则相机组件不会捕获视频。我尝试了以下方法，但它不起作用 -

import React, { useState, useEffect } from "react";
import { View } from "react-native"

import { Camera } from "expo-camera";

export function Scan () {
  const [hasPermission, setHasPermission] = useState(null);

  const handleIt = async ({ barCode }) => {
    // Code to handle barcode
  };

  useEffect(() => {
    (async () => {
      const { status } = await Camera.requestPermissionsAsync();
      setHasPermission(status === "granted");
    })();
  }, []);

  if (hasPermission === null) {
    return <View />;
  };

  return (
    <Camera
      onBarCodeScanned={handleIt}
      type={Camera.Constants.Type.front}
      style={{display: "none"}}
    />
  );
};

相机权限没有问题。当我将样式设置为 flex:1 时它起作用（见下面的代码）。但是，这也会渲染输出。

<Camera
  onBarCodeScanned={handleIt}
  type={Camera.Constants.Type.front}
  style={{flex: 1}}
/>

如果您对在不显示和隐藏相机输出的情况下完成这项工作有任何建议，请告诉我。

【问题讨论】：

试试style={{opacity: 0}}
您好，它适用于style={{opacity: 0, flex:1}}。我会发布这个作为答案。感谢您的帮助。

标签： android reactjs react-native expo

【解决方案1】：

这可以通过将 flex 和 opacity 设置为 0 来实现。对我有用的解决方案是 -

style={{opacity: 0, flex:1}}

感谢@Sohaib，他的评论对找到解决方案很有帮助。

【讨论】：