リアクションネイティブレンダリング複数画像

Question

marvels apiから複数の画像をレンダリングしようとしています。ここで

は一例です：私は多くのことを試してみました、と私はリストビューでそれをラップした場合、私が得る

class Character extends Component { 
    constructor(props) { 
    super(props); 
    } 

    render() { 
    let comic = this.props.character; 
    return (
     <View style={styles.container}> 
     <Text>{comic.description}</Text> 
     <Text style={styles.castTitle}>Characters in this comic:</Text> 
     <View> 
      {comic.characters.items.map(items => 
      <Text key={items.name} style={styles.castActor}> 
       &bull; {items.name} 
      </Text> 
     )} 
     </View> 
     <View> 
     <View> 
      {comic.images.map(images => 
      <ListView key={images.path}> 
      <Image source={{uri: images.path }} style={styles.Images} /> 
      </ListView> 
     )} 

     </View> 

     </View> 
     </View> 
    ); 
    } 

：

"images": [ 
      { 
      "path": "http://i.annihil.us/u/prod/marvel/i/mg/e/00/52264475c3499", 
      "extension": "jpg" 
      }, 
      { 
      "path": "http://i.annihil.us/u/prod/marvel/i/mg/e/70/51fc0cb22a1ff", 
      "extension": "jpg" 
      }, 
      { 
      "path": "http://i.annihil.us/u/prod/marvel/i/mg/f/70/51fc0c8f4dee4", 
      "extension": "jpg" 
      }, 
      { 
      "path": "http://i.annihil.us/u/prod/marvel/i/mg/7/40/51f9695a3ee93", 
      "extension": "jpg" 
      } ... 

そしてここでは、コードの一部でありますエラー：

なぜ、複数の画像をレンダリングする特別な方法がありますか？

よろしくおねがいします。アンカー

Answer 1

Hejfætter！ ;）

あなたの問題は、ListViewを正しい方法で使用していないと思います。反応し、ネイティブのWebサイト上のドキュメントを見て： http://facebook.github.io/react-native/docs/listview.html#listview

あなたはおそらくのような何かをしたい：

constructor(props) { 
    const imgsrc = new ListView.DataSource({ rowHasChanged: (img1, img2) => img1.path !== img2.path }) 
    this.state = { 
    imageSource: imgsrc.cloneWithRows(props.comic.images) 
    } 
} 
... // In render function 
<View> 
    <ListView 
    dataSource={this.state.imageSource} 
    renderRow={image => <Image source={{uri: image.path}} style={styles.Images} />} 
    /> 
</View> 
... 

Webプログラミングのバックグラウンドから来たときにこれがで少し奇妙に見えるかもしれませんが、それはですスクロール体験を円滑にするために必要です。

あなたに会いましょう！ アンダー

Answer 2

アンダーズさんに感謝します。今、私はあなたが示唆したように行うことを試みたが、今ではここでしか

が更新されたコードである1枚の画像、時間の多くを...レンダリング：

クラスの文字が{

constructor(props) { 
    super(props); 


    const imgsrc = new ListView.DataSource({ rowHasChanged: (img1, img2) => img1.path !== img2.path }) 
    this.state = { 
     imageSource: imgsrc.cloneWithRows(this.props.character.images) 
    } 
    } 

    render() { 
    let comic = this.props.character; 
    let imagePath = comic.thumbnail.path + '.' + comic.thumbnail.extension; 
    return (
     <ScrollView style={styles.scrollView}> 
     <View style={styles.container}> 
     <Image source={{uri: imagePath}} style={styles.Images} /> 
     <View style={styles.facts}> 
      <Text style={styles.title}> {comic.title} </Text> 
      <Text style={styles.secondtitle}>Format: {comic.format}</Text> 
      <Text style={styles.secondtitle}>Pages: {comic.pageCount}</Text> 
      </View> 
     </View> 
     <View style={styles.description}> 
      <Text style={styles.descriptionText}>{comic.description}</Text> 
      <View style={styles.characters}> 
      <Text style={styles.castTitle}>Characters in this comic:</Text> 
       {comic.characters.items.map(items => 
       <Text key={items.name} style={styles.characterName}> 
        &bull; {items.name} 
       </Text> 
      )} 
      </View> 
      <View> 

      <View> 
       <ListView 
       dataSource={this.state.imageSource} 
       renderRow={image => <Image source={{uri: imagePath}} style={styles.Images} />} 
       /> 
      </View> 

      </View> 




     </View> 
    </ScrollView> 
    ); 
    } 
} 

よろしくコンポーネントを拡張しますアンカー