react-native - React Nativeは、画像コンポーネントのaltに等しい属性がありますか

Question

reactjs から来て、画像を読み込めなかった場合にテキストを表示する画像コンポーネントの「alt」属性を期待していました。ここでドキュメントを読みましたが、最も近いのは on error イベントです。

React Native画像コンポーネントにaltに等しい属性はありますか? alt 属性がない場合、画像をデフォルトのテキストに置き換える最も簡単な方法は何ですか?

Answer 1

このようなコンポーネントは自分で作成できます。最小限のコードで済みます。基本的な例を次に示します。

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を Web の動作に近いスクリーン リーダーの として使用します。