android - 为什么我来自 url 的图像没有出现在 TouchableOpacity 中

Question

在react-native中，我试图制作一个 ScrollView ，其中每个元素都有一个标题和一个图像。因为我想从url加载图片，所以我编写了以下代码:

import {Text, TouchableOpacity,Image } from 'react-native'
import React from 'react'

const CatagoryCard = ({imgUrl,title}) => {
  return (
    <TouchableOpacity>
        <Image
            source = {{uri:imgUrl}}
            resizeMode = 'contain'
            className = "h-20 w-20 rounded flex-2"
        />
      <Text>{title}</Text>
    </TouchableOpacity>
  );
};

export default CatagoryCard;

并从另一个父组件类调用它们。

import { View, Text, ScrollView } from 'react-native'
import React from 'react'
import CatagoryCard from './CatagoryCard'

const Catagories = () => {
  return (
    <ScrollView horizontal
    showsVerticalScrollIndicator={false}
    contentContainerStyle={{
      paddingHorizontal:15,
      paddingTop:10
    }}>
      <CatagoryCard imgUrl = "https://i.ibb.co/ZYvGfFY/Untitled-design-7.png" title = " TEST 1"/>
      <CatagoryCard imgUrl = "https://i.ibb.co/ZYvGfFY/Untitled-design-7.png" title = " TEST 2"/>
      <CatagoryCard imgUrl = "https://i.ibb.co/ZYvGfFY/Untitled-design-7.png" title = " TEST 3"/>

    </ScrollView>
  )
}

export default Catagories

问题是标题在各个元素的 View 上完美显示，但图像由于某种未知原因未加载。

Answer 1

设置图像大小:

<TouchableOpacity>
  <Image
    style={{height: 50, width: 50}}
    source={{
      uri: 'https://reactnative.dev/img/tiny_logo.png',
    }}
  />
  <Text>Text</Text>
</TouchableOpacity>