我正在关注有关在 React Native 中将照片上传到 Firebase 的教程,并使用“react-native-image-picker”和“launchImagelibrary”(而不是教程中的“showImagePicker”,因为它不是使用时间更长)。但是,当我单击“上传图片”按钮时,出现此错误/警告:
我的 UploadScreen.js 文件如下:
import React,{ useState } from 'react';
import {
View,SafeAreaView,Text,TouchableOpacity,StyleSheet,Platform,Alert,Image
} from 'react-native';
import * as ImagePicker from 'react-native-image-picker';
import storage from '@react-native-firebase/storage';
import * as Progress from 'react-native-progress';
export default function UploadScreen() {
const [image,setImage] = useState(null);
const [uploading,setUploading] = useState(false);
const [transferred,setTransferred] = useState(0);
const selectImage = () => {
const options = {
maxWidth: 2000,maxHeight: 2000,storageOptions: {
skipBackup: true,path: 'images'
}
};
ImagePicker.launchImagelibrary(options,response => {
if (response.didCancel) {
console.log('User cancelled image picker');
} else if (response.error) {
console.log('ImagePicker Error: ',response.error);
} else if (response.customButton) {
console.log('User tapped custom button: ',response.customButton);
} else {
const source = { uri: response.uri };
console.log(source);
setImage(source);
}
});
};
const uploadImage = async () => {
const { uri } = image;
const filename = uri.substring(uri.lastIndexOf('/') + 1);
const uploadUri = Platform.OS === 'ios' ? uri.replace('file://','') : uri;
setUploading(true);
setTransferred(0);
const task = storage()
.ref(filename)
.putFile(uploadUri);
// set progress state
task.on('state_changed',snapshot => {
setTransferred(
Math.round(snapshot.bytesTransferred / snapshot.totalBytes) * 10000
);
});
try {
await task;
} catch (e) {
console.error(e);
}
setUploading(false);
Alert.alert(
'Photo uploaded!','Your photo has been uploaded to Firebase Cloud Storage!'
);
setImage(null);
};
return (
<SafeAreaView style={styles.container}>
<TouchableOpacity style={styles.selectButton} onPress={selectImage}>
<Text style={styles.buttonText}>Pick an image</Text>
</TouchableOpacity>
<View style={styles.imageContainer}>
{image !== null ? (
<Image source={{ uri: image.uri }} style={styles.imageBox} />
) : null}
{uploading ? (
<View style={styles.progressBarContainer}>
<Progress.Bar progress={transferred} width={300} />
</View>
) : (
<TouchableOpacity style={styles.uploadButton} onPress={uploadImage}>
<Text style={styles.buttonText}>Upload image</Text>
</TouchableOpacity>
)}
</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,alignItems: 'center',backgroundColor: '#bbded6'
},selectButton: {
borderRadius: 5,width: 150,height: 50,backgroundColor: '#8ac6d1',justifyContent: 'center'
},selectButton2: {
borderRadius: 5,justifyContent: 'center',marginTop: 20
},uploadButton: {
borderRadius: 5,backgroundColor: '#ffb6b9',buttonText: {
color: 'white',fontSize: 18,fontWeight: 'bold'
},imageContainer: {
marginTop: 30,marginBottom: 50,alignItems: 'center'
},progressBarContainer: {
marginTop: 20
},imageBox: {
width: 300,height: 300
}
});
是什么导致了这个警告,我该如何解决?
尝试修复
- AFTAB
const selectImage = () => {
const options = {
maxWidth: 2000,response.customButton);
} else {
const uri = image?.uri;
console.log(source);
setImage(response);
}
});
};
结果:
- 拉曼
import React,setImage] = useState("");
const [uploading,response.customButton);
} else {
const source = { uri: response?.uri };
console.log(source);
setImage(source);
}
});
};
const uploadImage = async () => {
const { uri } = image;
const filename = uri.substring(uri.lastIndexOf('/') + 1);
const uploadUri = Platform.OS === 'ios' ? uri.replace('file://','Your photo has been uploaded to Firebase Cloud Storage!'
);
setImage("");
};
return (
<SafeAreaView style={styles.container}>
<TouchableOpacity style={styles.selectButton} onPress={selectImage}>
<Text style={styles.buttonText}>Pick an image</Text>
</TouchableOpacity>
<View style={styles.imageContainer}>
{image !== "" && image !== undefined && (
<Image source={{ uri: image?.uri }} style={styles.imageBox} />
)}
{uploading ? (
<View style={styles.progressBarContainer}>
<Progress.Bar progress={transferred} width={300} />
</View>
) : (
<TouchableOpacity style={styles.uploadButton} onPress={uploadImage}>
<Text style={styles.buttonText}>Upload image</Text>
</TouchableOpacity>
)}
</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,height: 300
}
});
结果:
更新代码后控制台报错: