я пытаюсь сделать загрузчик фотографий для firebase в реагировать родной. Я следовал за учебником и принял код 1-на-1. Однако после того, как я хочу выполнить код, кажется, что все работает, пока код не должен быть загружен, тогда я получаю следующую ошибку:
Возможный необработанный отказ от обещания (id: 0): Ошибка: неизвестный произошла ошибка fn @ http://localhost: 8081 / index.bundle? platform = android & dev = true & minify = false: 2132: 45 http://localhost: 8081 / index.bundle? platform = android & dev = true & minify = false: 127402: 44 putFile @ http://localhost: 8081 / index.bundle? Platform = android & dev = true & minify = false: 137147: 104 uploadImage @ http://localhost: 8081 / index.bundle? платформа = android & dev = true & minify = false: 210966: 91 touchableHandlePress @ http://localhost: 8081 / index.bundle? platform = android & dev = true & minify = false: 54240: 47 touchableHandlePress @ [собственный код] _performSideEffectsForTransition @ http://localhost: 8081 / index.bundle? Platform = android & dev = true & minify = false: 52872: 36 _performSideEffectsForTransition @ [собственный код] _receiveSignal @ http://localhost: 8081 / index.bundle? Платформа = android & dev = true & minify = false: 52798: 46 _receiveSignal @ [собственный код] touchableHandleResponderRelease @ http://localhost: 8081 / index.bundle? platform = android & dev = true & minify = false: 52677: 26 touchableHandleResponderRelease [собственный код] invokeGuardedCallbackImpl @ * 102 9 *: 8081 / index.bundle? Platform = android & dev = true & minify = false: 8997: 21 invokeGuardedCallback @ http://localhost: 8081 / index.bundle? Platform = android & dev = true & minify = false: 9093: 42 invokeGuardedCallbackAndCatchFirstError @ http://localhost: 8081 / index.bundle? Platform = android & dev = true & minify = false: 9097: 36 executeDispatch @ http://localhost: 8081 / index.bundle? Platform = android & dev = true & minify = false: 9204: 48 executeDispatchesInOrder @ http://localhost: 8081 / index.bundle? platform = android & dev = true & minify = false: 9224: 26 executeDispatchesAndRelease @ http://localhost: 8081 / index.bundle? platform = android & dev = true & minify = false: 9329: 35 forEach @ [собственный код] forEachAccumulated @ http://localhost: 8081 / index.bundle? platform = android & dev = true & minify = false: 9319: 22 runEventsInBatch @ http://localhost: 8081 / index.bundle? Platform = android & dev = true & minify = false: 9353: 27 runExtractedPluginEventsInBatch @ http://localhost: 8081 / index.bundle? Platform = android & dev = true & minify = false: 9441: 25 http://localhost: 8081 / index.bundle? pl atform = android & dev = true & minify = false: 10467: 42 batchedUpdates $ 1 @ http://localhost: 8081 / index.bundle? platform = android & dev = true & minify = false: 21921: 20 batchedUpdates @ http://localhost: 8081 / index.bundle? Platform = android & dev = true & minify = false: 10415: 36 _receiveRootNodeIDEvent @ http://localhost: 8081 / index.bundle? Platform = android & dev = true & minify = false: 10466: 23 receiveTouches @ http://localhost: 8081 / index.bundle? Platform = android & dev = true & minify = false: 10496: 34 __callFunction @ http://localhost: 8081 / index.bundle? Platform = android & dev = true & minify = false: 2650: 49 http://localhost: 8081 / index.bundle? platform = android & dev = true & minify = false: 2363: 31 __guard @ http://localhost: 8081 / index. bundle? platform = android & dev = true & minify = false: 2604: 15 callFunctionReturnFlushedQueue @ http://localhost: 8081 / index.bundle? platform = android & dev = true & minify = false: 2362: 21 callFunctionReturnFlushedQue @ [собственный код ]
Кто-нибудь знаком с загрузкой изображений в firebase? в учебнике они используют uuid, но по какой-то причине приложение разрывается, когда я пытаюсь использовать это, поэтому я не учел его. это соответствующий код:
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Image, Button, ScrollView, ImageBackground, Dimensions,TouchableOpacity, FlatList,
AsyncStorage} from 'react-native';
import { Avatar, ListItem } from 'react-native-elements';
import Icon from 'react-native-vector-icons/FontAwesome';
import ImagePicker from 'react-native-image-picker';
import firebase from 'react-native-firebase';
const SCREEN_WIDTH = Dimensions.get("window").width;
const list = [
{
title: '',
icon: 'cake',
url: 'ProfileSettings',
},
]
const options = {
title: 'Select Image',
storageOptions: {
skipBackup: true,
path: 'images'
}
};
const ImageRow = ({ image, windowWidth, popImage }) => (
<View>
<Image
source={{ uri: image }}
style={[styles.img, { width: windowWidth / 2 - 15 }]}
onError={popImage}
/>
</View>
);
class profileScreen extends Component {
constructor(props){
super(props);
this.state = {
first: '',
place: '',
province: '',
uid: '',
profileImg: '',
email: '',
imgSource: '',
uploading: false,
progress: 0,
images: []
}
}
getUserData = (user) => {
console.log(user);
let ref = firebase.database().ref('Users/' + user);
ref.on('value' , snapshot =>{
var state = snapshot.val();
this.setState({
first: state.firstname,
place: state.place,
province: state.province,
uid: user,
profileImg: state.profileImg,
birthday: state.birthday,
email: state.email,
year: state.registered.split("-",1)
})
})
}
componentDidMount(){
let user = firebase.auth().currentUser;
console.log(user);
console.log('test');
this.getUserData(user.uid);
let images;
AsyncStorage.getItem('images')
.then(data => {
images = JSON.parse(data) || [];
this.setState({
images: images
});
})
.catch(error => {
console.log(error);
});
}
/**
* Select image method
*/
pickImage = () => {
ImagePicker.showImagePicker(options, response => {
if (response.didCancel) {
console.log('You cancelled image picker ?');
} else if (response.error) {
alert('And error occured: ', response.error);
} else {
const source = { uri: response.uri };
this.setState({
imgSource: source,
imageUri: response.uri
});
console.log(source);
}
});
};
/**
* Upload image method
*/
uploadImage = () => {
const ext = this.state.imageUri.split('.').pop(); // Extract image extension
const filename = `unique image' + ${ext}`; // Generate unique name
const imageRef = firebase.storage().ref('tutorials/images').child(filename +ext);
let mime = 'image/jpg';
imageRef.put(this.state.imageUri, { contentType: mime }).then((snapshot)=>{
console.log('Image uploaded successfully.')
}).catch((error)=>{
console.log('Image uploading failed:' + error);
});
};
/**
* Remove image from the state and persistance storage
*/
removeImage = imageIndex => {
let images = this.state.images;
images.pop(imageIndex);
this.setState({ images });
AsyncStorage.setItem('images', JSON.stringify(images));
};
render() {
const { uploading, imgSource, progress, images } = this.state;
const windowWidth = Dimensions.get('window').width;
const disabledStyle = uploading ? styles.disabledBtn : {};
const actionBtnStyles = [styles.btn, disabledStyle];
return (
<ScrollView style={styles.scorllVert}>
<View style={{ alignItems: 'flex-start', justifyContent: 'center', marginBottom: 40 }}>
<View style={styles.intro}>
<Text style={styles.introText}>Hoi, ik ben {this.state.first}{"\n"}<Text style={styles.introTextSpan}>Lid geworden in {this.state.year}</Text></Text>
{ this.state.profileImg ?
<Avatar size="large" rounded source={{uri: this.state.profileImg,}} onPress={() => console.log("Works!")} activeOpacity={0.7} />
:
<Avatar size="large" rounded title="GLR" onPress={() => console.log("Works!")} activeOpacity={0.7} />
}
</View>
<View style={styles.divider}>
</View>
<View style={styles.about}>
<Text style={styles.profileName}>Over</Text>
<View style={styles.aboutLiving}>
<Icon name='home' style={styles.icon}/>
<Text style={styles.aboutText}>Woont in {this.state.place}, {this.state.province}</Text>
</View>
</View>
<View style={styles.divider}>
</View>
<View style={styles.about}>
<Text style={styles.profileName}>Door {this.state.first} versterkt</Text>
<View style={styles.aboutLiving}>
<Icon name='check-circle' style={[styles.icon, styles.iconGreen]}/>
<Text style={styles.aboutText}>E-mail adres</Text>
</View>
</View>
<View style={styles.divider}>
</View>
<View style={styles.about}>
<Text style={styles.profileName}>Recente activiteiten</Text>
<Text >N.v.t.</Text>
<TouchableOpacity
style={actionBtnStyles}
onPress={this.pickImage}
disabled={uploading}
>
<View>
<Text style={styles.btnTxt}>Pick image</Text>
</View>
</TouchableOpacity>
{imgSource !== '' && (
<View>
<Image source={imgSource} style={styles.image} />
{uploading && (
<View
style={[styles.progressBar, { width: `${progress}%` }]}
/>
)}
<TouchableOpacity
style={actionBtnStyles}
onPress={this.uploadImage}
disabled={uploading}
>
<View>
{uploading ? (
<Text style={styles.btnTxt}>Uploading ...</Text>
) : (
<Text style={styles.btnTxt}>Upload image</Text>
)}
</View>
</TouchableOpacity>
</View>
)}
<View>
<Text
style={{
fontWeight: '600',
paddingTop: 20,
alignSelf: 'center'
}}
>
{images.length > 0
? 'Your uploaded images'
: 'There is no image you uploaded'}
</Text>
</View>
<FlatList
numColumns={2}
style={{ marginTop: 20 }}
data={images}
renderItem={({ item: image, index }) => (
<ImageRow
windowWidth={windowWidth}
image={image}
popImage={() => this.removeImage(index)}
/>
)}
keyExtractor={index => index}
/>
</View>
</View>
</ScrollView>
);
}
}
const styles = StyleSheet.create({
profileName:{
fontWeight: 'bold',
fontSize: 22,
marginTop: 20,
},
list:{
marginTop: 40,
width: '100%'
},intro:{
flex: 1,
flexDirection: 'row',
flexWrap: 'wrap',
alignItems: 'flex-start',
padding: 25,
marginBottom: 30,
paddingTop: 80,
},
introText:{
marginLeft: 0,
marginRight: 50,
fontSize: 22,
fontWeight: "700",
marginTop:15,
},
introTextSpan:{
marginLeft: 0,
marginRight: 40,
fontSize: 15,
fontWeight: "200",
marginTop:50,
},
divider:{
width: SCREEN_WIDTH-50,
padding: 10,
borderBottomColor: 'grey',
borderBottomWidth: 0.5,
marginTop: 10,
marginLeft: 25
},
about:{
paddingLeft: 25,
},
aboutLiving:{
flexDirection: 'row',
flexWrap: 'wrap',
alignItems: 'flex-start',
paddingTop: 10
},
icon:{
fontSize: 18
},
aboutText:{
marginLeft: 30
},
iconGreen:{
color: 'green'
}
,
button: {
marginTop: 30,
marginBottom: 20,
paddingVertical: 10,
alignItems: 'center',
backgroundColor: '#019BB4',
width: 300
},
buttonText: {
fontSize: 20,
fontWeight: 'bold',
color: '#fff'
},
scorllVert:{
marginBottom: 40
},
btn: {
paddingLeft: 20,
paddingRight: 20,
paddingTop: 10,
paddingBottom: 10,
borderRadius: 20,
backgroundColor: 'rgb(3, 154, 229)',
marginTop: 20,
alignItems: 'center'
},
disabledBtn: {
backgroundColor: 'rgba(3,155,229,0.5)'
},
btnTxt: {
color: '#fff'
},
image: {
marginTop: 20,
minWidth: 200,
height: 200,
resizeMode: 'contain',
backgroundColor: '#ccc',
},
img: {
flex: 1,
height: 100,
margin: 5,
resizeMode: 'contain',
borderWidth: 1,
borderColor: '#eee',
backgroundColor: '#ccc'
},
progressBar: {
backgroundColor: 'rgb(3, 154, 229)',
height: 3,
shadowColor: '#000',
}
})
export default profileScreen;
Я довольно новичок, чтобы реагировать на нативный и хотел бы загрузить изображения, есть ли кто-нибудь, кто может помочь мне сделать это? Даже если есть другие методы, я открыт для этого!