react-native - 加载远程图像失败后加载本地镜像

Question

如果远程图像失败，是否可以加载本地镜像？

例如，我有以下代码:

<Image style={ styles.userImage }
       source={ { uri: http://example.com/my_image.jpg } }
       onError={(error) => ...}
/>

例如，如果我无权访问 http://example.com/my_image.jpg , 我会在 onError 中得到一个错误.那么有没有办法加载本地镜像呢？

Answer 1

使用组件的状态。在您的构造函数中设置初始 url:

 this.state = { image: { uri: 'http://example.com/my_image.jpg' } }

创建 onError处理程序:

 onError(error){
   this.setState({ image: require('your_local_image.path')})
 }

然后将它们组合在一起:

 <Image style={ styles.userImage }
       source={ this.state.image }
       onError={ this.onError.bind(this) }
 />