Question

我正在尝试学习如何使用Firebase导入和导出数据。但是我被困在如何导入和导出具有特定名称的特定数据上。例如，用户写一个帖子供其他用户查看，或者用户上传的图像只能由上传的用户看到。

当我刚开始学习React Native时，我发现关于firebase的依赖项多种多样。我目前正在使用“ firebase”，但我也想知道“ react-native-firebase”是干什么用的。它比firebase有用吗？
看来大多数教程都是由“ react-native-firebase”组成的，我似乎看不出两者之间的区别。

下面是我一直在将数据存储到存储中的内容。
1. ImagePicker

onChooseImagePress = async () => {
let result = await ImagePicker.launchImageLibraryAsync();

  if (!result.cancelled) {
  this.uploadImage(result.uri, "test-image")
    .then(() => {
      Alert.alert("Success");
    })
    .catch((error) => {
      Alert.alert(error);
    });
  }
}

我想知道如何裁剪和保存图像。我注意到我必须使用称为“ react-native-image-crop-picker”的依赖项，但这是唯一的最佳选择吗？

2。保存图像

uploadImage = async (uri, imageName) => {
  const response = await fetch(uri);
  const blob = await response.blob();

  var ref = firebase.storage().ref().child("images/" + imageName);
  return ref.put(blob);
}

我想知道如何在/ images文件夹中保存多个具有不同名称的文件。现在，代码会不断更新我保存的最后一张图像。

3。渲染

render() {
  return (
    <View style={styles.container}>
      <Button title="Choose image..." onPress={this.onChooseImagePress} />
    </View>
  );
}

如何显示上传到渲染屏幕的最新图像？

4。最后，我正在尝试研究从数据库上传和下载的方法，如下所示。

export default class ImportandExportdata extends Component {
    constructor(props){
        super(props)
        this.state = {
            uid: '',
            title: '',
            item: '',
            description: '',
            imagePath: '',
            imageHeight: '',
            imageWidth: ''
        }
    }

    componentWillMount() {
        try {
            let user = firebase.auth().currentUser
            this.setState({
                uid: user.uid
            })
        } catch(error){
            console.log(error)
        }
    }

static createNewPost(userId, obj){
    let userNamePath = "/user/"+userId+"/post/"+Date.now()
    return firebase.database().ref(userNamePath).set(obj)
}
static getUserPost(userId, callback){
    let userNamePath = "/user/"+userId
    firebase.database().ref(userNamePath).on('value', (snapshot) => {
        let data = snapshot.val()
        if(snapshot){
            if(data.title){
                let obj = {
                    name: data.details.name,
                    url: data.details.url,
                    title: data.title
                }
                callback(obj)
            }
        }
    })
}

saveData(){
    if(this.state.uid){
        if(this.state.title &&
            this.state.item &&
            this.state.description &&
            this.state.imagePath
            ) {
                try {
                    this.uploadImage(this.state.imagePath, `${Date.now()}.jpg`)
                        .then((responseData) => {
                            const obj = {
                                title: this.state.title,
                                item: this.state.item,
                                description: this.state.description,
                                image: responseData
                            }
                           createNewPost(this.state.uid, obj)
                        })
                        .done()
                        this.props.navigator.push({
                            id: 'App'
                        })
                } catch(error){
                    console.log(error)
                }
            }
    }
}
    render(){
            return (
                <View style={styles.container}>
                    <Navbar  icon="times" showMenu={this.closeView.bind(this)}/>
                    <View style={styles.content}>
                        <View>
                            <View style={styles.containerImage}>
                                {this.state.imagePath ? <Image 
                                    style={{width: 100, height: 100, flex: 1, marginRight: 10}}
                                    source={{uri: this.state.imagePath}}
                                /> : null }
                            <TouchableHighlight
                                style={[styles.button, {flex: 2, justifyContent: 'center', alignItems: 'center'}]}
                                onPress={this.onChooseImagePress.bind(this)}
                            >
                                <Icon name="camera" size={18} color="white" />
                            </TouchableHighlight>
                        </View>
                        <View style={styles.containerInput}>
                            <Text style={styles.label}>Title</Text>
                            <TextInput 
                                style={styles.input}
                                value={this.state.title}
                                placeholder="Title"
                                placeholderTextColor="white"
                                onChangeText={(title) => this.setState({title})}
                            />
                        </View>
                        <View style={styles.containerInput}>
                            <Text style={styles.label}>Items</Text>
                            <TextInput 
                                style={styles.input}
                                value={this.state.item}
                                placeholder="Item list"
                                placeholderTextColor="white"
                                onChangeText={(food) => this.setState({food})}
                            />
                        </View>
                        <View style={styles.containerInput}>
                            <TextInput 
                                multiline
                                style={styles.inputTextArea}
                                value={this.state.description}
                                placeholder="Description"
                                placeholderTextColor="white"
                                onChangeText={(description) => this.setState({description})}
                            />
                        </View>
                    </View>
                    <View>
                        <TouchableHighlight
                            onPress={this.saveData.bind(this)}
                            style={[styles.button, {marginBottom: 10}]}
                        >
                            <Text style={styles.saveButtonText}>SAVE</Text>
                        </TouchableHighlight>
                    </View>
                    </View>
                </View>
            )
        }
    }

我被困在如何上传帖子并使其在新屏幕上可见的状态。为什么我不能使用“ onPress = {this.createNewPost}”而不是onPress = {this.saveData.bind（this）}上传帖子？
如何显示在新屏幕上上传的数据？我应该使用'source = {{uri：this.state.imagePath}}'吗？但是如何使它成为列表视图？
如果有用户上传许多帖子，如何使所有图像/上下文显示在列表视图中？
在撰写包含图像和上下文的帖子时，将图像文件上传到存储并使用上下文将图像的链接保存到Firestore的最佳选择是吗？
如果我是正确的话，似乎使用了componentWillMount方法来带来当前登录用户的ID。从数据库导入数据时有时会使用该方法。谁能解释我的真正含义？何时使用“ componentWillMount”，何时使用其他诸如“ componentDidMount”？

5。为什么我不能加载react-native-fetch-blob

import RNFetchBlob from 'react-native-fetch-blob'

const Blob = RNFetchBlob.polyfill.Blob
const fs = RNFetchBlob.fs
window.XMLHttpRequest = RNFetchBlob.polyfill.XMLHttpRequest
window.Blob = Blob

uploadImage = (uri, imageName, mime = 'image/jpg') => {
    return new Promise((resolve, reject) => {
        const uploadUri = Platform.OS === 'ios' ? uri.replace('file://', '') : uri
        let uploadBlob = null
        const imageRef = firebase.storage().ref(`${this.state.uid}/images`).child(imageName)
        fs.readFile(uploadUri, 'base64')
            .then((data) => {
                return Blob.build(data, {type: `${mime};BASE64`})
            })
            .then((blob) => {
                uploadBlob = blob
                return imageRef.put(blob, {contentType: mime})
            })
            .then(() => {
                uploadBlob.close()
                return imageRef.getDownloadURL()
            })
            .then((url) => {
                resolve(url)
            })
            .catch((error) => {
                reject(error)
            })
    })
}

似乎大多数开发人员都在使用“ react-native-fetch-blob”，但我的视觉工作室似乎无法正常工作（基于Android）。该错误是人们得到的最常见错误，即“未定义不是对象（评估'RNFetchBlob.DocumentDir'）”，而我仍然没有解决问题的方法。目前，我没有使用任何单独的ios或android文件夹或index.js。我的电脑是Windows10。所有节点，java，expo和Visual Studio都是最新版本。有谁知道如何使它工作？还是有可能使用其他方法？我也不知道“ react-native-fetch-blob”实际上是做什么的。

如果任何人都可以向我提供示例代码的链接，以便我可以从示例中学习，那将是很棒的。我非常渴望学习和解决自己面临的问题。我也愿意通过Messenger或制作精良的教程为一对一的导师付费。请帮忙〜

如何上传和显示React Native Firebase图像和数据

0 个答案: