web-dev-qa-db-ja.com

Reactネイティブイメージビューでuriイメージがレンダリングされない

私はReactネイティブ開発とAndroidアプリケーションを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の代わりに変数を使用する方法を教えてください。

androidimagereactjsreact-native
7
Raghuram db

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

<Image
      style={{width: 100, height: 100}}
      source={{uri: 
   'https://www.planwallpaper.com/static/images/9-credit-1.jpg'
    }}/>
7
Harmanpreet Singh