如何在使用 react-native-image-picker 选择图像后显示警报框

Question

我是 React-native 的新手在这里我想在从图库中选择图像后显示一个警告框，例如你确定要选择这个图像吗？将有两个选项是和取消。如果我按是，它将将该图像上传到服务器并显示成功上传的警报图像或控制台日志响应，如果按否，它将返回屏幕选择图像。这是我的代码我应该添加什么来获得这个结果？

import React, {Component} from 'react';
import {
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
  Image,
  Dimensions,
  Switch,
  Alert,
} from 'react-native';
import AntDesign from 'react-native-vector-icons/AntDesign';
import ImagePicker from 'react-native-image-picker';

const SCREEN_WIDTH = Dimensions.get('window').width;
const SCREEN_HEIGHT = Dimensions.get('window').height;

export default class VisitingCard extends Component {
  constructor(props) {
    super(props);
    this.state = {
      toggle: false,
      enable: true,
    };
  }

  isEnable() {
    this.setState({
      enable: !this.state.enable,
    });
  }

  Header() {
    return (
      <View style={styles.container}>
        <View style={styles.visitingCardTextContainer}>
          <TouchableOpacity>
            <AntDesign name="arrowleft" color="#ffffff" size={30} />
          </TouchableOpacity>
          <Text style={styles.visitingCardText}>Visiting Card</Text>
        </View>
        <View style={styles.iconContainer}>
          <TouchableOpacity onPress={() => this.isEnable()}>
            {this.state.enable ? (
              <Image source={require('./assets/edit_disable.png')} />
            ) : (
              <Image source={require('./assets/edit_enable.png')} />
            )}
          </TouchableOpacity>
          <TouchableOpacity onPress={() => this.isEnable()}>
            {this.state.enable ? (
              <Image
                style={styles.shareImg}
                source={require('./assets/share.png')}
              />
            ) : (
              <Image
                style={styles.shareImg}
                source={require('./assets/share.png')}
              />
            )}
          </TouchableOpacity>
        </View>
      </View>
    );
  }


  selectImage() {
    let options = {
      title: 'You can choose one image',
      storageOptions: {
        skipBackup: true,
      },
    };

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

      if (response.didCancel) {
        console.log('User cancelled photo picker');
        Alert.alert('You did not select any image');
      } 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};
      }
    });
  }

  render() {
    return (
      <View style={{flex: 1, backgroundColor: '#edf7ff'}}>
        <View style={{flex: 0.9}}>
          {this.Header()}
          <View style={{flexDirection: 'row', alignContent: 'stretch'}}>
            <View style={styles.themeContainer}>
              <Text style={styles.lightText}>Light Mode</Text>
              <Switch
                style={{marginLeft: 10}}
                trackColor={{false: 'gray', true: 'teal'}}
                thumbColor="white"
                ios_backgroundColor="gray"
                onValueChange={(value) => this.setState({toggle: value})}
                value={this.state.toggle}
              />
              <Text style={styles.darkText}>Dark Mode</Text>
            </View>
            <View style={styles.uploadImageContainer}>
              <Image source={require('./assets/camera.png')} />
              <TouchableOpacity onPress={this.selectImage}>
                <Text style={styles.uploadImageText}>Upload Image</Text>
              </TouchableOpacity>
            </View>
          </View>
        </View>
        <View style={styles.saveButtonContainer}>
          {this.state.enable ? (
            <TouchableOpacity style={styles.saveButton}>
              <Text style={styles.saveText}>Save</Text>
            </TouchableOpacity>
          ) : null}
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    width: SCREEN_WIDTH,
    height: SCREEN_HEIGHT / 2 - 400,
    backgroundColor: '#0066b3',
    flexDirection: 'row',
    alignItems: 'center',
  },
  visitingCardTextContainer: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    marginLeft: 10,
  },
  visitingCardText: {
    fontFamily: 'HelveticaNeue',
    fontSize: 18,
    fontWeight: 'bold',
    fontStyle: 'normal',
    lineHeight: 22,
    letterSpacing: 0,
    textAlign: 'left',
    color: '#ffffff',
    marginLeft: 10,
  },
  iconContainer: {
    flex: 0.2,
    flexDirection: 'row',
  },
  shareImg: {
    marginLeft: 15,
  },
  themeContainer: {
    height: 70,
    width: SCREEN_WIDTH - 130,
    alignItems: 'center',
    flexDirection: 'row',
  },
  lightText: {
    fontFamily: 'HelveticaNeueCondensed',
    fontSize: 16,
    fontWeight: 'normal',
    fontStyle: 'normal',
    lineHeight: 18,
    letterSpacing: 0,
    color: '#434343',
    marginLeft: 20,
  },
  darkText: {
    fontFamily: 'HelveticaNeueCondensed',
    fontSize: 16,
    fontWeight: 'normal',
    fontStyle: 'normal',
    lineHeight: 18,
    letterSpacing: 0,
    color: '#434343',
    marginLeft: 10,
  },
  uploadImageContainer: {
    height: 70,
    width: SCREEN_WIDTH,
    alignItems: 'center',
    flexDirection: 'row',
  },
  uploadImageText: {
    fontFamily: 'HelveticaNeueCondensed',
    fontSize: 16,
    fontWeight: 'normal',
    fontStyle: 'normal',
    lineHeight: 18,
    letterSpacing: 0,
    color: '#434343',
    margin: 5,
  },
  saveButtonContainer: {
    flex: 0.1,
    alignItems: 'center',
  },
  saveButton: {
    borderRadius: 4,
    height: 55,
    width: SCREEN_WIDTH - 80,
    backgroundColor: '#0066b3',
    justifyContent: 'center',
    alignItems: 'center',
  },
  saveText: {
    fontFamily: 'HelveticaNeue',
    fontSize: 16,
    fontWeight: 'bold',
    fontStyle: 'normal',
    lineHeight: 19,
    letterSpacing: 0,
    color: '#ffffff',
  },
});

Answer 1

Alert.alert('', 'Are you sure you want to choose this Image ?', [
 {
  text: "Cancel",
  onPress: () => null,
  style: "cancel"
 },
 {
  text: "YES",
  onPress: () => selectImage()
 }
]);

Answer 2

检查一下。

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

      if (response.didCancel) {
        console.log('User cancelled photo picker');
        Alert.alert('You did not select any image');
      } 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};
        // Show your alert here
        alert('Image selected successfully')
      }
    });