遠程圖像未在Android上使用React Native重定向

Question

Android上的React Native存在長期存在的問題，如果uri發出重定向，<Image/>組件將不會加載圖像。例如：

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

如果https://example.com/image.jpg響應以重定向（301，302等），以https://example.com/redirect.jpg的<Image/>組件將不加載圖像。

可以加載重定向後的圖片嗎？

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。