トークン

Question

では、「ベアラ」認証とネイティブイメージを反応させ、私は問題は、ユーザ画像はIヘッダを渡すJWTトークンによって保護されていることである<Image source={{uri: 'http://my.server.com/user/id/image/id.png'}} />

の画像を使用することができるネイティブ反応します。

何とか追加ヘッダを含めることはできますか？

私の他のオプションは何ですか？

ありがとうございます！

Answer 1

あなたのオプションはhttps://rnplay.org/apps/UowZmwです（シミュレータを表示するには、dev consoleにdocument.querySelector('.editor-container').style.width = '50%'と入力してください.RNPlayは長時間の内容で少し壊れています）。

基本的には、以下のことを行うことです。 1.画像をブロブとして配信します。 2. fetch()でアプリに取り込みます。 uriプロパティ

のコンテンツとしてのbase64データは、あなたのcomponentWillMount()でこれを行います 3.使用：

fetch(YOUR_IMAGE_URI, { 
    method: 'GET', 
    headers: { 
     'Authorization': 'Bearer ' + 'TOKEN' 
    } 
    } 
).then((res) => res.text()) 
.then((content) => { 
    this.setState({ 
    base64: content 
    }) 
}) 

あなたは、私が代わりにres.text()のres.blob()を使用して気づくことがあります。これは、これを記述するときにRNが.blob（）をサポートしないためです。

そして、これはrender()に行く：

return (
    <Image style={styles.base64} source={{uri: this.state.base64}} /> 
) 

Answer 2

あなたがソース小道具にヘッダを送信することができます。

<Image 
    source={ 
    { uri: 'https://yourdomain.com/get-image', 
     headers: { 
       Authorization: 'Bearer xyz' 
       } 
      } 
    }/> 

あなたにも他のパラメータを指定することができます。 ImageSourcePropType.js