React Nativeを使用してAndroidでリダイレクトされていないリモート画像

Question

urlがリダイレクトを発行した場合、<Image/>コンポーネントが画像を読み込まないAndroidでReact Nativeに長年にわたる問題があります。例：<Image/>コンポーネントはイメージをロードしないであろうhttps://example.com/redirect.jpgにリダイレクト（301、302など）を備えた

<Image source={uri: 'https://example.com/image.jpg'}/> 

https://example.com/image.jpg場合応答します。

リダイレクトに続く画像を読み込むことはできますか？

Answer 1

<Image/>コンポーネントはリダイレクトに従わないが、フェッチは実行され、新しいURIを取得するために使用できます。

export const getRedirect = async (uri)=>{ 
    const response = await fetch(uri) 
    const data = await response 
    return (data.status === 200 ? data.url : '') 
} 

これは、このような新しいコンポーネントで使用することができる。

class RedirectImage extends React.PureComponent { 
    constructor(props) { 
     super(props) 
     this.state = {uri: ''} 
    } 

    componentDidMount() { 
     getRedirect(this.props.uri).then((uri)=>{ 
      this.setState({uri: uri}) 
     }) 
    } 

    render() { 
     return (
      <Image 
       {...this.props} 
       source={{uri: this.state.uri}} 
      /> 
     ) 
    } 
} 

RedirectImage.propTypes = { 
    uri: PropTypes.string.isRequired, 
} 

export default RedirectImage 

所望のように今<RedirectImage uri={'https://example.com/image.jpg'}/>がhttps://example.com/redirect.jpg表示されます。