Question

大家好，我有以下场景。

我有一个 2 个屏幕和一个可用组件。在我的第一个主 GoalsDescoverScreen 屏幕中，我显示了所有数据，在第二个 GoalsDetailScreen 屏幕中，我显示了每个数据的单独数据。

在我的可用组件 (ItemView ) 中，我有图像和标题。请参阅下面的代码。

    const ItemView = ({
     title,
     url,
     onPress,
    }) => {
    return (

       <View style={styles.container} onPress={onPress}>
            <Image style={styles.image} source={url} />
            <View style={styles.textsWrapper}>
              <Text style={styles.companyName}>{title}</Text>
            <View>
                
       </View>
     );
   };

在第一个屏幕 (GoalsDescoverScreen ) 中，我用 Flatlist 显示了我从后端收到的所有目标，并且运行成功。看下面的代码

    const GoalsDescoverScreen = ({ navigation }) => {
   // fetching data from backend...
    return (
     <Screen style={styles.container}>
        <FlatList
          data={apiGoal}
          keyExtractor={(goal) => goal.id.toString()}
          renderItem={({ item }) => (
            <View style={styles.paddingWrapper}>
              <ItemView
                title={item.title}
                url={{ uri: item.thumbnailImageData.url }}
                onPress={() => navigation.navigate("GoalsDetails", item)}
               />
             </View>
           )}
         />
       ) 
      </Screen>
     );
    };

最后在我的第二个屏幕 (GoalsDetailScreen) 中，我想在新屏幕中显示 (GoalsDescoverScreen) 中的每个目标，我正在为此编写以下代码

    const GoalsDetailScreen = ({ route }) => {

      const listing = route.params;

       return (
       <View style={styles.container}>
         <Screen>
          <Image style={styles.image} source={listing.url} />
          <Text>{listing.title}</Text>
        </Screen>
      </View>
     );
   };

这样当我写的GoalsDetailScreen 标题成功出现在屏幕但没有图像时，请帮我解决这个问题

这是我从后端收到的数据：

    Array [
    Object {
    "amount": 1000000,
    "description": "Charity 1 description",
    "id": 1,
    "isActive": true,
    "organizationUserId": 14,
    "statistics": Object {
      "collected": 2629,
      "daysLeft": 2656,
      "supportersCount": 1,
    },
    "thumbnailImageData": Object {
      "publicId": "skcpez8lzezwgva2yeaj",
      "thumbnail": true,
      "url": 
 
 
 
 "https://res.cloudinary.com/dxdotwlx1/image/upload/v1616712587/skcpez8lzezwgva2ye 
    aj.jpg",
     },
     "title": "Charity 1",
    },
     Object {
    "amount": 1000000,
    "description": "Charity 4 description",
    "id": 4,
    "isActive": true,
    "organizationUserId": 14,
    "statistics": Object {
      "collected": 1031,
      "daysLeft": 6783,
      "supportersCount": 1,
    },
    "thumbnailImageData": Object {
      "publicId": "me4fbozwvq6sgffjfs4w",
      "thumbnail": true,
      "url": 
 
 
 
 
 "https://res.cloudinary.com/dxdotwlx1/image/upload/v1616712606/me4fbozwvq6sgffjfs4w.jpg",
    },
    "title": "Charity 4",
    },
    Object {
    "amount": 1000000,
    "description": "Charity 3 description",
    "id": 3,
    "isActive": true,
    "organizationUserId": 14,
    "statistics": Object {
      "collected": 632.15,
      "daysLeft": 11066,
      "supportersCount": 1,
    },
    "thumbnailImageData": Object {
      "publicId": "rzfstz2uqdswf0ha43bc",
      "thumbnail": true,
      "url": 
 
 
 
 
 
 
 "https://res.cloudinary.com/dxdotwlx1/image/upload/v1616712604/rzfstz2uqdswf0ha43 
    bc.jpg",
    },
    "title": "Charity 3",
    },
  
...
]

Answer 1

在GoalsDetailScreen屏幕应该写source={{ uri: listing.thumbnailImageData.url }}

将图像从一个屏幕传递到另一个屏幕

1 个答案: