React Native图片加载完成后渲染卡片组件的实现问题排查

你的代码存在3个核心问题，直接导致效果不符合预期：

• 三元判断逻辑完全写反：你现在设置的是!imageLoaded（图片未加载）时渲染轮播卡片，imageLoaded为true（加载完成）时反而展示加载指示器，和需求完全相反。
• 单状态不匹配多图片场景：只有一个全局imageLoaded状态，只要第一张图片加载完成就会触发状态变更，其余轮播图还在加载时就会提前展示卡片。
• JSX缺少根容器：React Native要求return返回的JSX必须有统一根节点，你当前的代码没有外层包裹容器，运行时会直接报错。

如果需要等所有轮播图都加载完成再展示卡片，可以用加载数量统计的逻辑实现：

const [loadedImageCount, setLoadedImageCount] = useState(0)
const images = props.companyImages.map(el => el.imageLink)
// 已加载数量等于总图片数时判定为全部加载完成
const isAllLoaded = loadedImageCount === images.length

const handleImageLoad = () => {
  setLoadedImageCount(prev => prev + 1)
}

return (
  <View>
    {isAllLoaded ? (
      // 加载完成展示轮播卡片
      <View style={styles.imageContainer}>
        <BitSwiper
          items={images.map((_, index) => index)}
          showPaginate={false}
          onItemRender={(item, index) => (
            <View key={index} style={{ height: 200, overflow: 'hidden', borderTopRightRadius: 20, borderTopLeftRadius: 20 }}>
              <Image
                source={{ uri: images[index] }}
                style={{ width: '100%', height: '100%', overflow: 'hidden' }}
                onLoad={handleImageLoad}
              />
            </View>
          )}
        />
      </View>
    ) : (
      // 加载中显示指示器
      <ActivityIndicator color='red' />
    )}
  </View>
)

如果你只需要第一张轮播图加载完成就展示卡片，不需要等所有图加载，把多图统计逻辑改回单个布尔状态、把三元判断的条件反过来即可。

内容的提问来源于stack exchange，提问作者EshgheCode