react-native image 设置默认图片

最新推荐文章于 2024-09-13 22:11:27 发布

原创最新推荐文章于 2024-09-13 22:11:27 发布 · 4.3k 阅读

0 ·

CC 4.0 BY-SA版权

react-native 专栏收录该内容

10 篇文章

订阅专栏

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

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

}