图片未显示

Question

我做了一个 instagram 克隆，我有一个新闻提要，您应该在其中看到用户发布的图片，但在我的情况下，图片没有显示。

我找不到任何错误不知道我做错了什么如果我拍照并上传它然后图片将保存在 Firebase 数据库中，并将显示在我的个人资料中，但不会显示在 Feed 中。

这是 Profile.js 文件：

import React, { useState, useEffect } from 'react';
import { StyleSheet, View, Text, Image, FlatList, Button } from 'react-native';
import { connect } from 'react-redux';

import firebase from 'firebase/app';
import 'firebase/firestore'

function Profile(props) {
  const [userPosts, setUserPosts] = useState([]);
  const [user, setUser] = useState(null);
  const [following, setFollowing] = useState(false)
  useEffect(() => {
    const { currentUser, posts } = props;
    console.log({ currentUser, posts });

    if (props.route.params.uid === firebase.auth().currentUser.uid) {
      setUser(firebase.auth().currentUser);
      setUserPosts(posts);
    }else{
            firebase.firestore()
            .collection("users")
            .doc(props.route.params.uid)
            .get()
            .then((snapshot) =>{
                if(snapshot.exists){
                    setUser(snapshot.data())
                }else{
                    console.log('does not exist')
            }
        })
        firebase.firestore()
        .collection("posts")
        .doc(props.route.params.uid)
        .collection("userPosts")
        .orderBy("creation", "asc")
        .get()
        .then((snapshot) =>{
            let posts = snapshot.docs.map(doc => {
                const data = doc.data();
                const id = doc.id;
                return{id, ...data}
      })
      setUserPosts(posts)
      })
    }
    if(props.following.indexOf(props.route.params.uid) > -1){
        setFollowing(true);
    }else{
        setFollowing(false)
    }
  },[props.route.params.uid, props.following]);


  const onFollow = () =>{
      firebase.firestore()
      .collection("following")
      .doc(firebase.auth().currentUser.uid)
      .collection("userFollowing")
      .doc(props.route.params.uid)
      .set({})
  }

  const onUnFollow = () =>{
    firebase.firestore()
    .collection("following")
    .doc(firebase.auth().currentUser.uid)
    .collection("userFollowing")
    .doc(props.route.params.uid)
    .delete()
}

const onLogout = () =>{
    firebase.auth().signOut();
}



  if (user === null) {
    return <View />;
  }
  return (
    <View style={styles.container}>
      <View style={styles.containerInfo}>
        <Text> {user.name} </Text>
        <Text> {user.email} </Text>

        {props.route.params.uid !== firebase.auth().currentUser.uid ? (
          <View> 
              {following ? (
                <Button
                  title="Following"
                  onPress={() => onUnFollow()}
                />

               
              ) : 
              (
                <Button
                title="Follow"
                onPress={() => onFollow()}
              />
              )}
          </View>
        ) : <Button
        title="Logout"
        onPress={() => onLogout()}
      />}
      </View>
      <View style={styles.containerGallery}>
        <FlatList
          numColumns={3}
          horizontal={false}
          data={userPosts}
          renderItem={({ item }) => (
            <View style={styles.containerImage}>
              <Image style={styles.image} source={{ uri: item.downloadURL }} />
            </View>
          )}
        />
      </View>
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  containerInfo: {
    margin: 20,
  },
  containerGallery: {
    flex: 1,
  },
  containerImage: {
    flex: 1 / 3,
  },
  image: {
    flex: 1,
    aspectRatio: 1 / 1,
  },
});

const mapStateToProps = (store) => ({
  currentUser: store.userState.currentUser,
  posts: store.userState.posts,
  following: store.userState.following
});

export default connect(mapStateToProps, null)(Profile);

Feed.js 文件：

import React, { useState, useEffect } from 'react';
import { StyleSheet, View, Text, Image, FlatList, Button } from 'react-native';
import { connect } from 'react-redux';

import firebase from 'firebase/app';
import 'firebase/firestore'

function Feed(props) {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    let posts = [];
    if(props.usersLoaded == props.following?.length){
        for(let i = 0; i < props.following?.length; i++){
            const user = props.users.find(el => el.uid === props.following[i]);
            if(user != undefined){
                posts = [...posts, ...user.posts]
            }
        }
        posts.sort(function(x,y) {
            return x.creation - y.creation;
        })
        setPosts(posts)
    }
  },[props.usersLoaded]);

  
  return (
   
      <View style={styles.containerGallery}>
        <FlatList
          numColumns={1}
          horizontal={false}
          data={posts}
          renderItem={({ item }) => (
            <View style={styles.containerImage}>
                <Text style={styles.container}>{item.user.name}</Text>
              <Image style={styles.image} source={{ uri: item.downloadURL }} />
            </View>
          )}
        />
      </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  containerInfo: {
    margin: 20,
  },
  containerGallery: {
    flex: 1,
  },
  containerImage: {
    flex: 1 / 3,
  },
  image: {
    flex: 1,
    aspectRatio: 1 / 1,
  },
});

const mapStateToProps = (store) => ({
  currentUser: store.userState.currentUser,
  following: store.userState.following,
  users: store.usersState.users,
  usersLoaded: store.usersState.usersLoaded,

});

export default connect(mapStateToProps, null)(Feed);

Answer 1

尝试为反应原生应用程序不显示图像或使用resizeMode提供高度，宽度而不是高度宽度。

resizeMode 属性（覆盖、包含、拉伸、居中）

Answer 2

这可能是因为缓存数据，将哈希键与图像 url 一起传递，以便您的图像在 src 更改时加载。

 <Image style={styles.image} key={item.downloadURL + `?${new Date()}`} source={{ uri: item.downloadURL + `?${new Date()}`  }} />

Answer 3

问题在幕后，希望这会奏效！

每当您使用 aspectRatio 时，您还必须添加 height: undefined ：

 image: {
    flex: 1,
    aspectRatio: 1 / 1,
    height: undefined,
  },

没有它就行不通。