为什么我的图片在 url 中没有出现在 TouchableOpacity 中

Question

在react-native中，我试图制作一个滚动视图，其中每个元素都有一个标题和一个图像。因为我想从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

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

Answer 1

设置图像大小：

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

Answer 2

使用这个对我有用，

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

const CategoryCard = ({imgUrl, title}) => {
  return (
    <TouchableOpacity className="mr-2 relative">
        <Image style={{height: 50, width: 50}} source= {{ uri: imgUrl }} />
      <Text className="bottom-1 left-1 absolute">{title}</Text>
    </TouchableOpacity>
  )
}

export default CategoryCard

我认为顺风CSS有一些问题

Answer 3

对于我来说，用 View 组件包装它对我来说很有效。还要确保您的 UI 文件夹列在 tailwind 配置文件中。

    return (
        <TouchableOpacity>
            <View>
                <Image
                    className="h-20 w-20 rounded"
                    source={{
                        uri: imgUrl,
                    }}
                />
            </View>
            <Text>{title}</Text>
        </TouchableOpacity>
    );

Answer 4

有同样的问题，对我有用的是设置

width : 100

，而不是

width : "100%: