如何在React Native中使用loadingIndicatorSource组件

Question

我在React Native的官方网站上看到了这个组件。但是在https://reactnative.dev/docs/image#loadingindicatorsource中没有任何示例。我只知道这是什么。有人可以告诉我如何在React Native中使用这个组件吗？

- Abhishek Singh

Answer 1

您可以像使用活动指示器一样使用loadingindicator。

<Image
            style={{
              width: "100%",
              height: "85%",
              alignSelf: "center",
            }}
            resizeMode="contain"
            loadingIndicatorSource={require("../assets/loader2.gif")}
            source={{ uri: item.thumb_url }}
          />

- Sayan Dey

Answer 2

<Image {...props} loadingIndicatorSource={URI} />

上述语句是什么意思？

1. {...props} - 是你的自定义属性，例如 source 或 style。
2. URI - 是图像的URI，当 source 属性中指定的图像正在加载时，将显示该图像。

示例：

• <Image source={{uri: URI}} loadingIndicatorSource={require('loadingIndicatorSource={require('@assets/images/loading.jpeg')}')}
• <Image source={{uri: URI}} loadingIndicatorSource={{uri: 'https://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/128/Emotes-face-smile-icon.png'}} />

- Maxim Fedarau

Answer 3

我发现其中一种使用方法是直接传递组件，例如ActivityIndicator

<Image loadingIndicatorSource={<YOUR LOADING COMPONENT/>} />

- Yan Brito

---

你能否用一个普通的例子来展示给我看？ - Abhishek Singh