javascript - React Native - 需要具有默认源的图像源

Question

我正在从 API 中获取一个 ID 列表，其中大部分我在本地存储了一个关联的图像。但是，某些 ID 没有图像，因此在尝试获取其来源时会返回错误。

这是我获取来源的方式：

<Image style={{height: '100%', width: '100%'}} source={require('../assets/character-images/' + this.character.id + '.jpg'))}/>

我怎样才能有一个默认的后备源？如果找不到图像，我什至不介意不加载图像......我就是无法摆脱这个错误。谢谢。

标签： javascriptreactjsreact-native

Answer 1

您可以处理图像上的 onError 事件，并改为渲染不同的图像。可以在下面找到接受默认图像的示例组件。

export default class ImageWithFailback extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      hasError: false
    };
  }
  _onError = () => {
    this.setState({ hasError: true });
  }
  render() {
    const failBackImage = <Image source={this.props.default} style={this.props.style} />;

    if (this.state.hasError) return failBackImage;

    return (
      <Image
        {...this.props}
        onError={this._onError}
        renderIndicator={_ => failBackImage}
      />
    );
  }
}