react-native image 设置默认图片

最新推荐文章于 2024-08-09 08:02:09 发布

26yl

最新推荐文章于 2024-08-09 08:02:09 发布

阅读量4.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： react-native

本文链接：https://blog.youkuaiyun.com/u011094768/article/details/77897588

react-native 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种在React Native中实现默认图片加载的方法，通过在外层包裹一层Image组件来显示默认图片，当网络图片加载失败时，可以无缝切换到默认图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Image在加载网络失败后图片位置就是空白的，好像官方api没有提供对应的默认图片设置方法，所以就找了个笨办法，在image外面嵌套一层image用来展示默认图片，有更好的解决方案也给我说说


import React, {Component} from 'react';
import {TouchableOpacity, Image} from 'react-native';

export default class ImageButton extends Component {
    render() {
        return (
            <TouchableOpacity activeOpacity={0.9} onPress={this.props.onPress}>
                {this._renderImg()}
            </TouchableOpacity>
        )
    }
    _renderImg(){
        if(this.props.defaultSource){
            return (
                <Image
                    style={this.props.style}
                    source={this.props.defaultSource}
                >
                    <Image
                        style={this.props.style}
                        source={this.props.source}
                    >
                        {this.props.children}
                    </Image>
                </Image>
            )
        }else {
            return (
                    <Image
                        style={this.props.style}
                        source={this.props.source}
                    >
                        {this.props.children}
                    </Image>
            )
        }
    }

}