从 Firestore 获取图像捕获错误 React Native答案

【问题标题】：Fetch images from firestore caught error React Native从 Firestore 获取图像捕获错误 React Native
【发布时间】：2022-01-02 10:35:02
【问题描述】：

错误

构造'Image'失败：请使用'new'操作符，这个DOM对象构造器不能作为函数调用。

在 Return 中，我在 View 标签中显示这样的信息。我有一个按钮，通过它我可以选择图像然后将其存储在 firestore 的 url 中，但是现在在 firebase 中获取该 uri 时我发现了错误。

Firebase Firestore

{ photo.map(({ id, data }) =>
                data.email === auth.currentUser.email ? (
                <View key={id} style={styles.sender}>
                <Image source={{ url: data }} style={{ width: 200, height: 200 }}  />
                </View>
                ) : (
                                        
            <View key={id} style={styles.reciever} key={id}>
            <Image source={{ url: data }} style={{ width: 200, height: 200 }}  />
                                        </View>
                                    )
                                )}

从 Firestore 获取数据

const [photo, setPhoto] = useState([]);
useLayoutEffect(() => {
        const unsubscribeimage = db
            .collection("chats")
            .doc(route.params.id)
            .collection("token") 
            .onSnapshot((snapshot) =>
                setPhoto(
                    snapshot.docs.map((doc) => ({
                        id: doc.id,
                        data: doc.data(),
                        
                        
                    }))
                

                )

            );
        return unsubscribeimage;
        

        
    }, [route]);

【问题讨论】：

您尝试过以下解决方案吗？它解决了您的问题吗？

标签： reactjs firebase react-native google-cloud-firestore

【解决方案1】：

您将uri 输入错误为url。尝试重构您的代码，如下所示：

{ photo.map(({ id, data }) =>
                data.email === auth.currentUser.email ? (
                <View key={id} style={styles.sender}>
                <Image source={{ uri: data }} style={{ width: 200, height: 200 }}  />
                </View>
                ) : (
                                        
            <View key={id} style={styles.reciever} key={id}>
            <Image source={{ uri: data }} style={{ width: 200, height: 200 }}  />
                                        </View>
                                    )
                                )}

【讨论】：