react-native image 设置默认图片

嵇丰
2023-12-01

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>
            )
        }
    }

}
 类似资料: