2017-12-28 8 views
2

Reactネイティブ開発に慣れていて、React Nativeを使用してアンドロイドアプリケーションを開発しています。私は以下のような名前と連絡先の詳細を表示しようとしているプロフィールページを持っています。uriイメージがReactネイティブイメージビューで表示されない

return(
    <View style={{flex: 1}}> 
     <ScrollView contentContainerStyle={styles.contentContainer}> 
     <View style={styles.card}> 
     <View style={styles.horizontalCard}> 
     <Image 
      style={{width: 34, height: 34}} 
      source={{uri: 
     'http://test.abc.com/appdummyurl/images/mobile.png'}} 
     /> 
      <Text style={styles.header}>{this.state.user_email}</Text> 
     </View> 

     <View style={styles.horizontalCard}> 
     <Image 
      style={{width: 34, height: 34}} 
      source={{uri: 
     'http://test.abc.com/appdummyurl/images/images/profile.png'}} 
     /> 
      <Text style={styles.header}>{this.state.user_no}</Text> 
     </View> 

     </View>  

    </ScrollView> 
    <TouchableOpacity onPress={this.logOut}> 
      <View style={styles.BottonCard}> 
       <Text style={styles.Btntext}>LOG OUT</Text> 
      </View> 
      </TouchableOpacity> 
    </View> 
); 

最初のイメージが最初のイメージビューに読み込まれ、2番目のイメージが空白スペースを示している以外は、すべて正常に動作しています。それを理解するのを助けてください。

また、画像URLの代わりに変数を使用する方法を教えてください。

+0

あなたのブラウザでそれらをテストするとうまくいくのですか? –

+0

はい@SandraK。そのブラウザでの作業 –

答えて

3

あなたのネットワークが遅いか、画像パスが正しくないか、サーバーの問題である可能性があります。あなたはグーグルからの任意のダミーイメージパスでこのケースをテストする必要があります。たとえば、これを使用する

<Image 
     style={{width: 100, height: 100}} 
     source={{uri: 
    'https://www.planwallpaper.com/static/images/9-credit-1.jpg' 
    }}/> 
関連する問題