Question

就像HTML一样，我们有机会显示文本，即 <img src="hello.png" alt="hello" />

有很多建议将图像替换为另一图像（fallback src），但是我需要显示文本而不是其他任何图像！

Answer 1

React Native Image onError方法将在服务器上找不到映像或连接出现意外问题时在映像上执行。使用它，您可以显示以下文本，

import React, { Component } from "react";
import { Text, View, Image, StyleSheet } from "react-native";

export default class Example extends Component {
  state = {
    isLoadingImage: true,
    isImageFailed: false
  };

  onErrorLoadingImage = () => {
    this.setState({
      isLoadingImage: false,
      isImageFailed: true
    });
  };

  render() {
    return (
      <View style={styles.container}>
        {!this.state.isImageFailed ? (
          <Image
            source={{
              uri:
                "https://reactnativecode.com/wp-content/uploads/2017/10/Guitar.jpg"
            }}
            style={styles.imageStyle}
            onError={this.onErrorLoadingImage}
          />
        ) : (
          <View style={styles.container}>
            <Text>Error loading image</Text>
          </View>
        )}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 10,
    justifyContent: "center",
    alignItems: "center"
  },
  imageStyle: {
    resizeMode: "center",
    width: "50%",
    height: "50%"
  }
});

不幸的是，没有其他方法可以像HTML alt=" Error loading image "一样显示文本

希望这会对您有所帮助。

在Image REACT NATIVE上遇到onError时用文本替换

1 个答案: