如何使切换隐藏页面上的所有组件，以便在react-native中只显示背景图像？我

Question

我有一个相机视图，它显示相机视图作为背景。在那个页面上，我有一个操纵杆和一些滑块来控制曝光和在视图中移动。如何切换以禁用操纵杆和滑块，以使视图畅通无阻？

下面是我的代码。我需要的是一个开关，可以隐藏滑块和操纵杆，这是在这个视图。因此，当切换被选中时，它只是隐藏所有内容，并且只显示mjpeg流，而当未选中时，它将再次显示滑块和操纵杆。

import { Layout } from "components/common";
import { Box, Text, Icon, IconButton, VStack, Button } from "native-base";
import React, {
  cloneElement,
  useCallback,
  useLayoutEffect,
  useState,
} from "react";
import * as ScreenOrientation from "expo-screen-orientation";
import { useFocusEffect, useNavigation } from "@react-navigation/core";
import { Feather } from "@expo/vector-icons";
import { KorolJoystick, KorolSlider, Stepper } from "components/ui";
import { SettingsModal } from "components/CameraView";
import { WebView } from "react-native-webview";
import { useAppSelector } from "redux-store/store";
// import socket from "tools/poseCam";

var ip = "10.42.0.1";
let ws = new WebSocket(`ws://${ip}:2100/ws`);
ws.onopen = () => {
  console.log("connection established");
};
const CameraView = () => {
  const nav = useNavigation();
  const [showSettings, setShowSettings] = useState(false);
  const { controlType, step } = useAppSelector((state) => state.cameraSettings);

  useLayoutEffect(() => {
    ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE);
  }, []);
  const [x, setX] = useState(0);
  useFocusEffect(
    useCallback(() => {
      return () => {
        ScreenOrientation.unlockAsync();
      };
    }, [])
  );
  return (
    <Layout>
      <Box flex={1} position="relative">
        <WebView
          originWhitelist={["*"]}
          scrollEnabled={false}
          scalesPageToFit
          style={{
            backgroundColor: "transparent",
          }}
          containerStyle={{
            flex: 1,
          }}
          source={{
            uri: "http://10.42.0.1:2101/mjpeg",
            // uri: "http://mjpeg.sanford.io/count.mjpeg",
          }}
        />
        <VStack
          position="absolute"
          display="flex"
          width="full"
          flexDirection="row"
          padding="5"
          alignItems="center"
        >
          <IconButton
            marginRight="auto"
            icon={<Icon as={Feather} color="primary.500" name="arrow-left" />}
            colorScheme="primary"
            onPress={() => nav.goBack()}
          />
          <Button
            size="md"
            startIcon={<Icon size="xs" as={Feather} name="plus" />}
            backgroundColor="primary.500:alpha.40"
          >
            Add Waypoint
          </Button>
          <IconButton
            icon={<Icon as={Feather} color="primary.500" name="settings" />}
            colorScheme="primary"
            onPress={() => setShowSettings(true)}
          />
        </VStack>

        <VStack position="absolute" bottom="30" left="30" width="56" space={2}>
          <VStack>
            {/* <Text>Focus</Text>
            <KorolSlider /> */}
          </VStack>
          <VStack>
            {/* <Text>Zoom</Text>
            <KorolSlider /> */}
          </VStack>
          <VStack>
            <Text>Slide</Text>
            <KorolSlider
              value={x}
              onChange={(slider) => {
                setX(slider);
                console.log(slider);
              }}
              onDragEnd={() => {
                let message = {
                  from: "FromClient",
                  data: {
                    case: "joystick",
                    joystick: {
                      slider: x,
                    },
                  },
                };
                ws.send(JSON.stringify(message));
              }}
            />
          </VStack>
        </VStack>
        <Box position="absolute" right="30" bottom="30">
          {controlType === "joystick" ? (
            <KorolJoystick
              onMove={(values) => {
                console.log(values);
                let message = {
                  from: "FromClient",
                  data: {
                    case: "joystick",
                    joystick: {
                      angle: values.angle.radian,
                      force: values.force,
                    },
                  },
                };
                ws.send(JSON.stringify(message));
              }}
              onStop={(values) => {
                let message = {
                  from: "FromClient",
                  data: {
                    case: "joystick",
                    joystick: {
                      angle: 0,
                      force: 0,
                    },
                  },
                };

                ws.send(JSON.stringify(message));
              }}
            />
          ) : (
            <Stepper
              onPress={(dir) => {
                const vel = 5;
                const tiltVel = 5;
                // if (Math.abs(step)<=1){
                //  vel=1
                // }

                if (dir === "up") {
                  const message = {
                    from: "FromClient",
                    data: {
                      case: "controlCMDRel",
                      moveData: { tilt: [step, vel] },
                    },
                  };
                  console.log(message);

                  ws.send(JSON.stringify(message));
                }

                if (dir === "down") {
                  const message = {
                    from: "FromClient",
                    data: {
                      case: "controlCMDRel",
                      moveData: { tilt: [-step, vel] },
                    },
                  };

                  ws.send(JSON.stringify(message));
                }
                if (dir === "left") {
                  const message = {
                    from: "FromClient",
                    data: {
                      case: "controlCMDRel",
                      moveData: { pan: [-step, vel] },
                    },
                  };

                  ws.send(JSON.stringify(message));
                }
                if (dir === "right") {
                  const message = {
                    from: "FromClient",
                    data: {
                      case: "controlCMDRel",
                      moveData: { pan: [step, vel] },
                    },
                  };

                  ws.send(JSON.stringify(message));
                }
              }}
            />
          )}
        </Box>
      </Box>
      <SettingsModal
        show={showSettings}
        onClose={() => setShowSettings(false)}
      />
    </Layout>
  );
};

export default CameraView;

Answer 1

我看不出你的背景图片是在哪里(在哪个元素上)设置的，但你可以像这样有条件地渲染任何组件：

return(
<div>
  I am wrapper
  {isVisible && <div>I am visible if isVisible is true</div>}
</div>
)

您可以在父div上设置背景图像，这样当子div不可见时，您可以看到背景图像。