首页 > 解决方案 > 在 React Native 中拥有来自 expo-camera 的多个图像

问题描述

expo-camera在我的 React Native 应用程序中使用。我已经成功地能够从相机拍摄照片并获得,uri但我希望我的应用程序能够将每张拍摄的照片保存在一个数组中。这是我每次拍照并存储当前照片的代码:

//Here's the onpress on a button in a different component of taking photo

<TouchableOpacity
    onPress={async () => {
    let photo = await cameraRef.takePictureAsync();
    props.setImage(photo);
    props.setModalVisible();         
    }}
>
            
//Here's the component for image show

export default function ImagePickerExample() {
    const [image, setImage] = useState(null);
    const [camera, setShowCamera] = useState(false);
    const [hasPermission, setHasPermission] = useState(null);
    const [list, setList] = useState([]);

useEffect(() => {
    (async () => {
      const { status } = await Camera.requestPermissionsAsync();
      setHasPermission(status === "granted");
    })();
    }, []);
    
if (hasPermission === null) {
    return <View />;
  }
  if (hasPermission === false) {
    return <Text>No access to camera</Text>;
  }
return (
    <View>
      <View>
       <TouchableOpacity onPress={()=>{setShowModal(true);}}>
        <Image
          source={{ uri: image }} style={{ width: 120, height: 120 }}/>
      </TouchableOpacity>
      </View>
    <View style={{marginTop: 20 }}>
     <Button
       onPress={() => {setShowCamera(true);}}
       title="Camera"
         />
    </View>
    {camera && (
        <CameraModule
          showModal={camera}
          setModalVisible={() => setShowCamera(false)}
          setImage={(result) => setImage(result.uri)}
      setList={(result) => setList(result.uri)}
        />
      )}
    </View>
  );
}

在这里,我只显示一张图像,但我想显示我从应用程序中获取的每张图像。如何将我从这段代码中获取的每个图像存储在一个数组中。

标签: javascriptreact-nativeexpo

解决方案


推荐阅读