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