时间戳

首页 > 解决方案 > 如何在反应本机应用程序中通过相机（反应本机图像选择器）捕获和渲染多个图像

image - 如何在反应本机应用程序中通过相机（反应本机图像选择器）捕获和渲染多个图像

问题描述

我想在反应原生应用程序中捕获和渲染 3 个不同的不同图像。我怎样才能做到这一点。现在我可以单击图像，但是当我单击图像时，相同的图像会渲染 3 次，但我想一张一张地单击图像。

这是我的代码

constructor(props) {
    super(props);

    this.state = {
      resourcePath: {},
      singleFile:null,
       fileUri:null,
       imageArray:{
         PAN: null,
         ADH: null,
         ADH1: null,
       },
       imageType:'',
       evenTry:false,
       singleFilePAN:'',
       singleFileADH:'',
       singleFileADH1:'',
       showCamera: false
    };
  }

  requestCameraPermission = async () => {
    try {
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.CAMERA,
        {
          title: "App Camera Permission",
          message:"App needs access to your camera ",
          buttonNeutral: "Ask Me Later",
          buttonNegative: "Cancel",
          buttonPositive: "OK"
        }
      );
      if (granted === PermissionsAndroid.RESULTS.GRANTED) {
  
            let options = {
              storageOptions: {
                skipBackup: true,
                path: 'images',
              },
            };

        ImagePicker.launchCamera(options, (res) => {
              console.log('Response = ', res);
        
              if (res.didCancel) {
                console.log('User cancelled image picker');
              } else if (res.error) {
                console.log('ImagePicker Error: ', res.error);
              } else if (res.customButton) {
                console.log('User tapped custom button: ', res.customButton);
                alert(res.customButton);
              } else {
                const source = { uri: res.uri };
                console.log('response', res.uri);

                const newImageArray = this.state.imageArray;

                newImageArray.PAN = res.uri
                newImageArray.ADH = res.uri
                newImageArray.ADH1 = res.uri
              
                this.setState({imageArray : {...newImageArray}})
              
                this.setState({
                  filePath: res,
                  fileData: res.data,
                  fileUri: res.uri,

                  singleFilePAN: newImageArray.PAN,
                  singleFileADH: newImageArray.ADH,
                  singleFileADH1: newImageArray.ADH1
                });
              }
            })

      } else {
        console.log("Camera permission denied");
      }
    } catch (err) {
      console.warn(err);
    }
  };

  render() {

    return (
      <View style={styles.container}>
        <View style={styles.container}>
        
        <Image source={{uri: this.state.imageArray.PAN}} style={{width: 100, height: 100}} />
        <Image source={{uri: this.state.imageArray.ADH}} style={{width: 100, height: 100}} />
        <Image source={{uri: this.state.imageArray.ADH1}} style={{width: 100, height: 100}} />
     
          <TouchableOpacity onPress={this.requestCameraPermission} style={styles.button}>
              <Text style={styles.buttonText}>Launch Camera Directly</Text>
          </TouchableOpacity>


          <TouchableOpacity onPress={this.uploadImage} style={styles.button}  >
              <Text style={styles.buttonText}>फोटो अपलोड कीजिए&lt;/Text>
          </TouchableOpacity>
          

        </View>
      </View>
    );
  }
}

请忽略这一点。我想在反应原生应用程序中捕获和渲染 3 个不同的不同图像。我怎样才能做到这一点。现在我可以单击图像，但是当我单击图像时，相同的图像会渲染 3 次，但我想一张一张地单击图像。我想在反应原生应用程序中捕获和渲染 3 个不同的不同图像。我怎样才能做到这一点。现在我可以单击图像，但是当我单击图像时，相同的图像会渲染 3 次，但我想一张一张地单击图像。

标签： imagereact-nativefile-uploadimage-uploadreact-native-image-picker

解决方案

您在代码中所做的基本上是为数组的所有三个条目设置相同的图像 uri，这就是渲染图像都相同的原因

            newImageArray.PAN = res.uri //this is the same as the ones bellow
            newImageArray.ADH = res.uri
            newImageArray.ADH1 = res.uri

您可以做的是在拍摄后将图像添加到数组中，然后在您的渲染函数中像这样在图像数组上进行映射

imageArray.map((x) => <Image source={{uri: x.uri}} style={{width: 100, height: 100}} />)

推荐阅读