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을 표시한다.