如何在使用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')
}
});

Answer 3

const pickImage = async (submit) => {
const permissionResult =
await ImagePicker.requestMediaLibraryPermissionsAsync()
if (!permissionResult.granted) return alert(MEDIA_PERMISSION)
const result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images,
allowsEditing: true,
aspectRatio: [4, 3],
})
if (result?.uri) {
Alert.alert(
WHAT_TO_UPLOAD,
'',
[
{ text: 'Cancel', onPress: () => {} },
{
text: 'Yes, Continue',
onPress: async () =>
await submit({ name: 'image', ...result }),
},
],
{ cancelable: false }
)
}
}