小贝子编程

如果第二张图片上传，第一张图片将被删除，第二张图片将出现在第一张图片的地方，如何在react native中实现这一点.



我是新手。我在react native中创建了一个表单。我为用户设置了两个图标，一个是上传pan card图像，第二个是上传adhar card图像，假设用户上传了pan card的第一张图像，现在他的图像没有正确设置，现在他想从相同的选项上传第二张图像。当用户在第一张图片上上传第二张图片时。第一个图像将自动删除。在这个图像的位置，第二个图像会出现。那么我该怎么做呢?请帮忙。

这是我的代码

import React, { useState, useEffect } from 'react';
import {
StyleSheet,
View,
Button,
Image,
FlatList,
Text,
TextInput,
alert,
Alert
} from 'react-native';
import { Camera } from 'expo-camera';
import { Ionicons } from '@expo/vector-icons';
import * as ImagePicker from 'expo-image-picker';
import { Entypo } from '@expo/vector-icons';
export default function Add({navigation}) {
// const { height } = Dimensions.get("window");
// const { width } = Dimensions.get("window");
const [cameraPermission, setCameraPermission] = useState(null);
const [galleryPermission, setGalleryPermission] = useState(null);
const [showCamera, setShowCamera] = useState(false);
const [camera, setCamera] = useState(null);
const [imageUri, setImageUri] = useState([]);
const [type, setType] = useState(Camera.Constants.Type.back);
const [imageArray, setImageArray] = useState([]);
const [PIMGError, setPImgError] = useState([]);
const [PIMG, setPImg] = useState('');
const [GIMGError, setGImgError] = useState([]);
const [GIMG, setGImg] = useState('');
const [AIMGError, setAImgError] = useState([]);
const [AIMG, setAImg] = useState('');
const permisionFunction = async () => {
// here is how you can get the camera permission
const cameraPermission = await Camera.requestPermissionsAsync();
console.log('camera permission:', cameraPermission.status);
setCameraPermission(cameraPermission.status === 'granted');
const imagePermission = await ImagePicker.getMediaLibraryPermissionsAsync();
console.log('permission:', imagePermission.status);
setGalleryPermission(imagePermission.status === 'granted');
if (
imagePermission.status !== 'granted' &&
cameraPermission.status !== 'granted'
) {
alert('Permission for media access needed.');
}
};
useEffect(() => {
permisionFunction();
}, []);

const validateInputs = () =>{
if (!/[A-Z]{5}[0-9]{4}[A-Z]{1}/.test(PIMG))
{
setPImgError('Please Insert PAN Card Image')
return;
}
if (!/^[0-9]{2}[A-Z]{5}[0-9]{4}[A-Z]{1}[1-9A-Z]{1}Z[0-9A-Z]{1}$/.test(GIMG)) 
{
setGImgError('Please Insert GST Card Image')
return;
}
if (!/^[2-9]{1}[0-9]{3}\s[0-9]{4}\s[0-9]{4}$/.test(AIMG)) 
{
setAImgError('Please Insert Adhar Card Image')
return;
}
else {
Alert.alert("All fields validated")
return;
}
}
const handlePIMG = (text) => {
setPImgError('')
setPImg(text)
}
const handleGIMG = (text) => {
setGImgError('')
setGImg(text)
}
const handleAIMG = (text) => {
setAImgError('')
setAImg(text)
}

const takePicture = async () => {
if (camera) {
const data = await camera.takePictureAsync(null);
console.log(data.uri);
setImageUri(data.uri);
setImageArray([...imageArray, data.uri]);
setShowCamera(false);
}
};
const pickImage = async () => {
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images,
quality: 1,
});
console.log(result.uri);
if (!result.cancelled) {
setImageArray([...imageArray, result.uri]);
}
};
return (
<View style={{flex: 1}}>
<View style={styles.header}>
<Ionicons style={{paddingLeft:20}} name="arrow-back" size={40} 
color="black"  onPress={() => navigation.navigate("FormItems")} />
<Text style={{fontSize:20, paddingLeft: 70, paddingTop: 10}}>KYC Details</Text>
</View>
<View style={styles.container}>
{showCamera && (
<Camera ref={(ref) => setCamera(ref)} style={{ flex: 1 }} type={type} />
)}
{showCamera && <Button title={'Click'} onPress={takePicture} />}
{!showCamera && (
<>
<View
style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<View style={{ flexDirection: 'row', paddingTop:30 }}>
<Text style={{fontSize:20, color:'white', marginRight:35, marginLeft:20}}>Insert PAN Card Image</Text>
<Entypo name="camera" size={24} color="black"  onPress={() => {
setShowCamera(true);
}} />
<Entypo style={{marginLeft:10}} name="folder-images" size={24} color="black"  onPress={pickImage}  />
</View>
</View>
<View
style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<View style={{ flexDirection: 'row', paddingTop:30 }}>
<Text style={{fontSize:20, color:'white', marginRight:35, marginLeft:20}}>Insert GST Card Image</Text>
<Entypo name="camera" size={24} color="black"  onPress={() => {
setShowCamera(true);
}} />
<Entypo style={{marginLeft:10}} name="folder-images" size={24} color="black"  onPress={pickImage}  />
</View>
</View>
<View
style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<View style={{ flexDirection: 'row', paddingTop:30 }}>
<Text style={{fontSize:20, color:'white', marginRight:20, marginLeft:20}}>Insert Adhar Card Image</Text>
<Entypo name="camera" size={24} color="black"  onPress={() => {
setShowCamera(true);
}} />
<Entypo style={{marginLeft:10}} name="folder-images" size={24} color="black"  onPress={pickImage}  />
</View>
</View>
{imageArray.length > 0 && (
<View style={{ height: 110 }}>
<FlatList
horizontal
data={imageArray}
renderItem={({ item }) => (
<Image
source={{ uri: item }}
style={{
width: 100,
height: 100,
borderRadius: 10,
margin: 5,
}}
/>
)}
/>
</View>
)}
</>
)}
<Button style={styles.inputStyleB}
title="Submit"
color="#808080"
onPress={() => validateInputs()}
/>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
// marginTop: 30,
flex: 1,
backgroundColor: "rgb(247, 146, 57)",
// alignItems: 'center',
// justifyContent: 'center',
paddingTop: 15,
},
fixedRatio: {
flex: 1,
},
header:{
flexDirection:'row'
}
});

这是该项目的世博小吃链接
我对代码进行了许多更改，并创建了一个用于存储图像类型的状态，如PAN或GST或Aadhar，并根据此类型设置image.uri属性为imageArray。

我也从代码中删除了FlatList，因为我已经将ImageArray状态更改为对象

import React, { useState, useEffect } from 'react';
import {
StyleSheet,
View,
Button,
Image,
FlatList,
Text,
TextInput,
alert,
Alert,
} from 'react-native';
import { Camera } from 'expo-camera';
import { Ionicons } from '@expo/vector-icons';
import * as ImagePicker from 'expo-image-picker';
import { Entypo } from '@expo/vector-icons';
export default function Add({ navigation }) {
// const { height } = Dimensions.get("window");
// const { width } = Dimensions.get("window");
const [cameraPermission, setCameraPermission] = useState(null);
const [galleryPermission, setGalleryPermission] = useState(null);
const [showCamera, setShowCamera] = useState(false);
const [camera, setCamera] = useState(null);
const [imageUri, setImageUri] = useState([]);
const [type, setType] = useState(Camera.Constants.Type.back);
const [imageArray, setImageArray] = useState({
PAN: null,
GST: null,
Aadhar: null,
});
const [imageType, setImageType] = useState('');
const [PIMGError, setPImgError] = useState([]);
const [PIMG, setPImg] = useState('');
const [GIMGError, setGImgError] = useState([]);
const [GIMG, setGImg] = useState('');
const [AIMGError, setAImgError] = useState([]);
const [AIMG, setAImg] = useState('');
const permisionFunction = async () => {
// here is how you can get the camera permission
const cameraPermission = await Camera.requestPermissionsAsync();
console.log('camera permission:', cameraPermission.status);
setCameraPermission(cameraPermission.status === 'granted');
const imagePermission = await ImagePicker.getMediaLibraryPermissionsAsync();
console.log('permission:', imagePermission.status);
setGalleryPermission(imagePermission.status === 'granted');
if (
imagePermission.status !== 'granted' &&
cameraPermission.status !== 'granted'
) {
alert('Permission for media access needed.');
}
};
useEffect(() => {
permisionFunction();
}, []);
const validateInputs = () => {
if (!/[A-Z]{5}[0-9]{4}[A-Z]{1}/.test(PIMG)) {
setPImgError('Please Insert PAN Card Image');
return;
}
if (
!/^[0-9]{2}[A-Z]{5}[0-9]{4}[A-Z]{1}[1-9A-Z]{1}Z[0-9A-Z]{1}$/.test(GIMG)
) {
setGImgError('Please Insert GST Card Image');
return;
}
if (!/^[2-9]{1}[0-9]{3}\s[0-9]{4}\s[0-9]{4}$/.test(AIMG)) {
setAImgError('Please Insert Adhar Card Image');
return;
} else {
Alert.alert('All fields validated');
return;
}
};
const handlePIMG = (text) => {
setPImgError('');
setPImg(text);
};
const handleGIMG = (text) => {
setGImgError('');
setGImg(text);
};
const handleAIMG = (text) => {
setAImgError('');
setAImg(text);
};
const takePicture = async () => {
if (camera) {
const data = await camera.takePictureAsync(null);
console.log(data.uri);
setImageUri(data.uri);
const newImageArr = imageArray;
if (imageType === 'PAN') {
newImageArr.PAN = data.uri;
}
if (imageType === 'GST') {
newImageArr.GST = data.uri;
}
if (imageType === 'Aadhar') {
newImageArr.Aadhar = data.uri;
}
setImageArray({ ...newImageArr });
setShowCamera(false);
setImageType('');
}
};
const pickImage = async (type) => {
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images,
quality: 1,
});
console.log(result.uri);
if (!result.cancelled) {
const newImageArr = imageArray;
if (type === 'PAN') {
newImageArr.PAN = result.uri;
}
if (type === 'GST') {
newImageArr.GST = result.uri;
}
if (type === 'Aadhar') {
newImageArr.Aadhar = result.uri;
}
setImageArray({ ...newImageArr });
}
};
return (
<View style={{ flex: 1 }}>
<View style={styles.header}>
<Ionicons
style={{ paddingLeft: 20 }}
name="arrow-back"
size={40}
color="black"
onPress={() => navigation.navigate('FormItems')}
/>
<Text style={{ fontSize: 20, paddingLeft: 70, paddingTop: 10 }}>
KYC Details
</Text>
</View>
<View style={styles.container}>
{showCamera && (
<Camera
ref={(ref) => setCamera(ref)}
style={{ flex: 1 }}
type={type}
/>
)}
{showCamera && <Button title={'Click'} onPress={takePicture} />}
{!showCamera && (
<>
<View
style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<View style={{ flexDirection: 'row', paddingTop: 30 }}>
<Text
style={{
fontSize: 20,
color: 'white',
marginRight: 35,
marginLeft: 20,
}}>
Insert PAN Card Image
</Text>
<Entypo
name="camera"
size={24}
color="black"
onPress={() => {
setShowCamera(true);
setImageType('PAN');
}}
/>
<Entypo
style={{ marginLeft: 10 }}
name="folder-images"
size={24}
color="black"
onPress={() => {
pickImage("PAN");
}}
/>
</View>
</View>
<View
style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<View style={{ flexDirection: 'row', paddingTop: 30 }}>
<Text
style={{
fontSize: 20,
color: 'white',
marginRight: 35,
marginLeft: 20,
}}>
Insert GST Card Image
</Text>
<Entypo
name="camera"
size={24}
color="black"
onPress={() => {
setShowCamera(true);
setImageType('GST');
}}
/>
<Entypo
style={{ marginLeft: 10 }}
name="folder-images"
size={24}
color="black"
onPress={() => {
pickImage("GST");
}}
/>
</View>
</View>
<View
style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<View style={{ flexDirection: 'row', paddingTop: 30 }}>
<Text
style={{
fontSize: 20,
color: 'white',
marginRight: 20,
marginLeft: 20,
}}>
Insert Adhar Card Image
</Text>
<Entypo
name="camera"
size={24}
color="black"
onPress={() => {
setShowCamera(true);
setImageType('Aadhar');
}}
/>
<Entypo
style={{ marginLeft: 10 }}
name="folder-images"
size={24}
color="black"
onPress={() => {
pickImage("Aadhar");
}}
/>
</View>
</View>
{imageArray.PAN && (
<Image
source={{ uri: imageArray.PAN }}
style={{
width: 100,
height: 100,
borderRadius: 10,
margin: 5,
}}
/>
)}
{imageArray.GST && (
<Image
source={{ uri: imageArray.GST }}
style={{
width: 100,
height: 100,
borderRadius: 10,
margin: 5,
}}
/>
)}
{imageArray.Aadhar && (
<Image
source={{ uri: imageArray.Aadhar }}
style={{
width: 100,
height: 100,
borderRadius: 10,
margin: 5,
}}
/>
)}
</>
)}
<Button
style={styles.inputStyleB}
title="Submit"
color="#808080"
onPress={() => validateInputs()}
/>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
// marginTop: 30,
flex: 1,
backgroundColor: 'rgb(247, 146, 57)',
// alignItems: 'center',
// justifyContent: 'center',
paddingTop: 15,
},
fixedRatio: {
flex: 1,
},
header: {
flexDirection: 'row',
},
});

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium