Я хочу отправить сообщение, содержащее текст и изображение, в базу данных firebase в реагировать на родную.
Проблема в том, что я получаю эту ошибку: Сообщение об ошибке В PostScreen кнопка для сделать пост отображается. В Fire. js он обрабатывается и также отправляется в базу данных.
Я надеюсь, что кто-то может помочь мне с этой ошибкой.
PostScreen. js
import React, { Component } from 'react';
import {
View,
Text,
StyleSheet,
Alert,
FlatList,
ScrollView,
SafeAreaView,
TouchableOpacity,
Image,
TextInput,
Button,
PermissionsAndroid,
NativeModules
} from 'react-native';
import {Ionicons} from '@expo/vector-icons';
import Constants from 'expo-constants';
import * as Permissions from 'expo-permissions';
import Fire from '../src/Fire';
import ImagePicker from 'react-native-image-crop-picker';
const firebase = require("firebase");
require("firebase/firestore");
export default class PostScreen extends Component {
state = {
text: "",
image: null,
};
handlePost = () => {
Fire.shared
.addPost({ text: this.state.text.trim(), localUri: this.state.image })
.then(ref => {
this.setState({ text: "", image: null });
this.props.navigation.goBack();
})
.catch(error => {
alert(error.message);
});
};
pickSingle = () => {
ImagePicker.openPicker({
width: 500,
height: 500,
cropping: true
}).then(image => {
console.log('received image', image);
this.setState({
image: {uri: image.path, width: image.width, height: image.height, mime: image.mime},
});
}).catch(e => {
console.log(e);
Alert.alert(e.message ? e.message : e);
});
}
renderImage(image) {
return <Image style={{width: 300, height: 300, resizeMode: 'contain'}} source={image} />
}
renderAsset(image) {
return this.renderImage(image);
}
componentDidMount() {
this.requestCameraRollPermission();
}
getPhotoPermission = async () => {
const { status } = await Permissions.getAsync(Permissions.READ_EXTERNAL_STORAGE);
if (status !== 'granted') {
alert('We need access to your camera rool');
}
};
requestCameraRollPermission = async () => {
try {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE);
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
return null;
} else {
return null;
}
} catch (err) {
return null;
}
};
requestCameraPermission = async () => {
try {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.CAMERA);
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
return null;
} else {
return null;
}
} catch (err) {
return null;
}
};
render() {
return (
<SafeAreaView style={styles.container}>
<View style={styles.header}>
<TouchableOpacity onPress={() => this.props.navigation.goBack()}>
<Ionicons name="md-arrow-back" size={24} color="#D8D9D8"></Ionicons>
</TouchableOpacity>
<TouchableOpacity onPress={this.handlePost}>
<Text style={{ fontSize: 15 ,fontWeight: 'bold', color: '#1d6fa4' }}>Post</Text>
</TouchableOpacity>
</View>
<View style={styles.inputContainer}>
<Image style={styles.avatar}></Image>
<TextInput
autoFocus={true}
multiline={true}
numberOfLines={4}
style={{ flex: 1 }}
placeholder='Want to share something?'
onChangeText={text => this.setState({ text })}
value={this.state.text}
></TextInput>
</View>
<View style={styles.icons}>
<TouchableOpacity style={styles.photo}>
<Ionicons name="md-photos" size={32} color='#D8D9DB' onPress={this.pickSingle} ></Ionicons>
</TouchableOpacity>
<TouchableOpacity style={styles.camera}>
<Ionicons name="md-camera" size={32} color='#D8D9DB' ></Ionicons>
</TouchableOpacity>
</View>
<ScrollView style={{ marginHorizontal: 25, marginTop: 25, height: 150, }}>
{this.state.image ? this.renderAsset(this.state.image) : null}
{this.state.images ? this.state.images.map(i => <View key={i.uri} style={{ alignItems: 'center' }}>{this.renderAsset(i)}</View>) : null}
</ScrollView>
</SafeAreaView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
header: {
flexDirection: 'row',
justifyContent: 'space-between',
paddingHorizontal: 32,
paddingVertical: 12,
borderBottomWidth: 1,
borderBottomColor: '#D8D9D8'
},
inputContainer: {
margin: 32,
flexDirection: "row",
borderWidth: 0.5,
borderColor: '#D8D9D8'
},
avatar: {
width: 48,
height: 48,
borderRadius: 24,
marginRight: 16
},
icons: {
flexDirection: 'row',
justifyContent: 'flex-end'
},
photo: {
marginRight: 20
},
camera: {
marginRight: 33
},
imgContainer: {
marginVertical: 20
},
button: {
backgroundColor: 'blue',
marginBottom: 10,
},
text: {
color: 'white',
fontSize: 20,
textAlign: 'center'
},
title: {
fontWeight: 'bold',
fontSize: 22
},
safeArea: {
marginTop: 20
},
dateContainer: {
flexDirection: 'row',
},
imgView: {
width: '50%',
marginVertical: 10,
}
});
Огонь. js
import firebase from 'firebase';
var firebaseConfig = {
apiKey: "AIzaSyB1Z4eYKBoQVxREriGRi9neur5pVbIr2d8",
authDomain: "caring-1.firebaseapp.com",
databaseURL: "https://caring-1.firebaseio.com",
projectId: "caring-1",
storageBucket: "caring-1.appspot.com",
messagingSenderId: "369253724134",
appId: "1:369253724134:web:49a7597841cdd55970f027"
};
class Fire {
constructor() {
firebase.initializeApp(firebaseConfig)
}
addPost = async ({ text, localUri }) => {
const remoteUri = await this.uploadPhotoAsync(localUri);
return new Promise((res, rej) => {
this.firestore
.collection("posts")
.add({
text,
uid: this.uid,
timestamp: this.timestamp,
image: remoteUri
})
.then(ref => {
res(ref);
})
.catch(error => {
rej(error);
});
});
};
uploadPhotoAsync = async uri => {
const path = `photos/${this.uid}/${Date.now()}.jpg`;
return new Promise(async(res, rej) => {
const response = await fetch(uri);
const file = await response.blob();
let upload = firebase
.storage()
.ref(path)
.put(file);
upload.on(
"state_changed",
snapshot => {},
err => {
rej(err);
},
async () => {
const url = await upload.snapshot.ref.getDownloadURL();
res(url);
}
);
});
};
get firestore() {
return firebase.firestore()
}
get uid() {
return (firebase.auth().currentUser || {}).uid;
}
get timestamp() {
return Date.now();
}
}
Fire.shared = new Fire();
export default Fire;