React Native 是否有一个属性等于图像组件上的 alt
React Native is there an attribute equals to alt on image component
来自 reactjs,我期待图像组件上的 "alt" 属性,该属性将在无法加载图像的情况下显示文本。
我阅读了文档 here,发现最接近的是 on error 事件。
React Native图片组件中有alt属性吗?如果我没有 alt 属性,用默认文本替换图像的最简单方法是什么?
您可以自己制作这样的组件,它需要的代码量非常少。这是一个基本示例:
export default class AccessibleImage extends Component {
state = {
error : false
};
_onImageLoadError = (event) => {
console.warn(event.nativeEvent.error);
this.setState({ error : true });
}
render() {
const { source, alt, style } = this.props;
const { error } = this.state;
if (error) {
return (
<Text>{alt}</Text>
);
}
return (
<Image
accessible
accessibilityLabel={alt}
source={source}
style={style}
onError={this._onImageLoadError} />
);
}
}
如果加载图像时出现错误,这将显示所提供的 alt
,并将该文本用作更接近网络行为的屏幕阅读器的 accessibilityLabel
。
来自 reactjs,我期待图像组件上的 "alt" 属性,该属性将在无法加载图像的情况下显示文本。 我阅读了文档 here,发现最接近的是 on error 事件。
React Native图片组件中有alt属性吗?如果我没有 alt 属性,用默认文本替换图像的最简单方法是什么?
您可以自己制作这样的组件,它需要的代码量非常少。这是一个基本示例:
export default class AccessibleImage extends Component {
state = {
error : false
};
_onImageLoadError = (event) => {
console.warn(event.nativeEvent.error);
this.setState({ error : true });
}
render() {
const { source, alt, style } = this.props;
const { error } = this.state;
if (error) {
return (
<Text>{alt}</Text>
);
}
return (
<Image
accessible
accessibilityLabel={alt}
source={source}
style={style}
onError={this._onImageLoadError} />
);
}
}
如果加载图像时出现错误,这将显示所提供的 alt
,并将该文本用作更接近网络行为的屏幕阅读器的 accessibilityLabel
。