Question

我只想使用相机API捕捉图像然后将其存储在数组中然后在React native

中水平逐个查看图像

    import React, { Component } from 'react';
    import {
      Platform,
      StyleSheet,
      Text,
      View,
      TouchableOpacity,
      Image,
      PixelRatio

    } from 'react-native';

    import ImagePicker from 'react-native-image-picker';
    let ret;

    export default class Location extends Component {
        constructor(props){
         super(props);
        this.state = {
          latitude: null,
          longitude: null,
          address: 'address',
          MyAddress: null,
          error: null,
        }; 

      }

      state = {
        avatarSource: null,
        videoSource: null
      };


    selectPhotoTapped() {
    const options = {
      quality: 1.0,
      maxWidth: 500,
      maxHeight: 500,
      storageOptions: {
        skipBackup: true
      }
    };

为了获得Image，我使用了它。

    ImagePicker.showImagePicker(options, (response) => {
      console.log('Response = ', response);

      if (response.didCancel) {
        console.log('User cancelled photo picker');
      }
      else if (response.error) {
        console.log('ImagePicker Error: ', response.error);
      }
      else if (response.customButton) {
        console.log('User tapped custom button: ', response.customButton);
      }
      else {
        let source = { uri: response.uri };
        // You can also display the image using data:
        //let source = { uri: 'data:image/jpeg;base64,' + response.data };
        this.setState({
          avatarSource: source
        });
      }
    });
  }

然后如何处理以查看像adpater这样的图像列表。

        return (
            <View style={{ flexGrow: 1, alignItems: 'center', justifyContent: 'center' }}>

要在一个视图中显示图像，我已完成此操作。我想查看多个图像，如视图pager.Like [] [] [] []

              <TouchableOpacity onPress={this.selectPhotoTapped.bind(this)}>
              <View style={[styles.avatar, styles.avatarContainer, {marginBottom: 20}]}>
              { this.state.avatarSource === null ? <Text>Select a Photo</Text> :
                <Image style={styles.avatar} source={this.state.avatarSource} />
              }
              </View>
            </TouchableOpacity>
            </View>
        )
      }
    }

几个小时后我就完成了这件事首先将图像uri保存在数组中然后显示在列表中..

let dataStorage = [{uri: response.uri}, ...this.state.dataStorage]
        this.setState({dataStorage})



<FlatList
          horizontal
          data={this.state.dataStorage}
          renderItem={({ item: rowData }) => {
            return (
              <View style={[styles.avatar, styles.avatarContainer, {marginBottom: 20}]}>
                  {  <Image style={styles.avatar} source={{uri:rowData.uri}} /> }
              </View>

             );
              }
          }
        keyExtractor={(item, index) => index}
        />

Answer 1

使用Expo的ImagePicker可以实现。

以下是我的代码，可能会对您有所帮助。

注意：其性能较慢，但可以正常工作。

1）状态：

constructor(props) {
    super(props);
    this.state = {
      images: []
    };
  }

2）openCamera函数：

openCamera = async () => {
    const { status } = await Permissions.askAsync(
      Permissions.CAMERA,
      Permissions.CAMERA_ROLL
    );
    this.setState({
      hasCameraPermission: status === 'granted',
      hasGalleryPermission: status === 'granted'
    });

    if (this.state.hasCameraPermission && this.state.hasGalleryPermission) {
      ImagePicker.launchCameraAsync({
        aspect: [1, 1],
        quality: 0.2,
        base64: true
      })
        .then(async result => {
          if (!result.cancelled) {
            await this.setState({
              images: this.state.images.concat(result.uri)
            });
            Alert.alert(
              'Add another picture? ',
              null,
              [
                {
                  text: 'Yes',
                  onPress: () => this.openCamera()
                },
                { text: 'No' }
              ],
              { cancelable: false }
            );
          }
          console.log(this.state.images);
        })
        .catch(error => console.log(error));
    }
  };

3）显示图像：

showImages = () => {
    let temp_image = [];
    this.state.images.map((item, index) => {
      let tempKey = item + '123';
      temp_image.push(
        <View key={tempKey}>
          <View
            key={index}
            style={{
              height: 100,
              width: 100,
              borderColor: '#dddddd'
            }}
          >
            <Image
              key={index}
              source={{ uri: item }}
              style={{
                flex: 1,
                flexDirection: 'row',
                backgroundColor: 'silver',
                padding: 5,
                borderRadius: 5,
                height: null,
                width: null,
                margin: 3,
                resizeMode: 'cover'
              }}
            />
          </View>
          <View key={index + 1}>
            <TouchableOpacity
              key={index + 2}
              style={{
                flex: 1,
                justifyContent: 'center',
                alignSelf: 'center',
                width: '100%'
              }}
              onPress={() => {
                this.removeImage(index);
                this.forceUpdate();
              }}
            >
              <Text
                key={index + 3}
                style={{
                  alignSelf: 'center',
                  color: '#CE3C3E',
                  fontWeight: 'bold'
                }}
              >
                Delete
              </Text>
            </TouchableOpacity>
          </View>
        </View>
      );
    });
    console.log('state images: ', this.state.images);

    return temp_image;
  };

4）删除图像：

removeImage = index => {
    Alert.alert('Delete this image?', null, [
      {
        text: 'Yes',
        onPress: () => {
          this.state.images.splice(index, 1);
          // console.log(this.state.images);
          this.forceUpdate();
        }
      },
      { text: 'No' }
    ]);
  };

5）并在render（）函数中：

<ScrollView horizontal={true} style={{ flex: 1, flexDirection: 'row' }} >
{this.showImages()}
</ScrollView>

如何在原生反应中水平查看多个捕获图像？

1 个答案: