在React Native中预加载图像

Question

我正在用React Native构建我的第一个应用程序，这是一个包含大量图像的应用程序。我想在图像加载时显示微调器而不是图像。听起来微不足道，但我没有找到解决方案。
我认为对于旋转器，我想使用ActivityIndicatorIOS，但是如何将其与Image组件结合起来？

<Image source={...}>
  <ActivityIndicatorIOS />
</Image>

这是正确的方向吗？我想念什么吗？

Answer 1

我会分享我的解决方案

<View>
    <Image source={{uri: this.state.avatar}} style={styles.maybeRenderImage}
                                   resizeMode={"contain"} onLoadStart={() => this.setState({loading: true})}
                                   onLoadEnd={() => {
                                       this.setState({loading: false})
    }}/>
    {this.state.loading && <LoadingView/>}
</View>

LoadingView.js

export default class LoadingView extends Component {
    render() {
        return (
            <View style={styles.container}>
                <ActivityIndicator size="small" color="#FFD700"/>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        position: "absolute",
        left: 0,
        right: 0,
        top: 0,
        bottom: 0,
        opacity: 0.7,
        backgroundColor: "black",
        justifyContent: "center",
        alignItems: "center",
    }
});