时间戳

首页 > 解决方案 > 加载组件图像时反应原生渲染整个组件？

reactjs - 加载组件图像时反应原生渲染整个组件？

问题描述

只有当它们的图像成功加载并且它们处于加载状态时，我才需要在应用程序中显示这些卡片，我想显示一个加载指示器。所以这是我的实现：


const [imageLoaded, setImageLoaded] = useState(false)

  const images = props.companyImages.map((el, index) => {
    return el.imageLink
  })

  const loaded = () => {
    setImageLoaded(true)
  }

  return (

      {!imageLoaded ? 

      <View style={styles.imageContainer}>
        <BitSwiper
          items={images.map((el, 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={loaded}
              />
            </View>
          )}
        />
      </View>
        :
        <ActivityIndicator color='red' /> 
}

但这不起作用。有任何想法吗？

标签： reactjsreact-native

解决方案

<View style={styles.imageContainer}>
  <BitSwiper
    items={images.map((el, 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',opacity: imageLoaded?1:0}}
          onLoad={loaded}
        />
        {!imageLoaded? <ActivityIndicator color='red' /> :<></>}
      </View>
    )}
  />
</View>

包裹ActivityIndicator在绝对定位的容器中并将其居中，如果需要，您可以添加过渡到图像淡入淡出

另外，我不确定不透明度是否要在样式中使用，但是您会找到方法的:)

推荐阅读