イメージパターンを含むビューを描画する

Question

イメージパターンを含むビューを下の図のようにレンダリングしたい。まず、必要な量のアイテムを配列にプッシュしてから、私はビュー（行）を返すメソッドを呼び出しました。

getRow =() => { 
     return(
      <View style={{flex:1,flexDirection:'row', justifyContent: "space-between"}}> 
       { this.images.map(function(img,i) { return img; }) } 
      </View> 
     ) 
    } 

私が想像できるように、私は二次元配列が必要です。私は必要な行数を知っています。

prepareTable =() => { 
    let arr = [] 
    for (let i = 0; i < pattern.height.count; ++i) { 
     arr.push((this.drawRow())) 
    } 
    return arr 
} 

そして、私はそれらをレンダリングしたい場合：：だから、私はこれを作った

render() { 

    let arr = prepareTable() 
    return(
    <View style={{flex:1,flexDirection:'column', justifyContent: "space-between"}}> 
     {arr.map((row,i)=>{return row})} 
    </View> 
    ) 
} 

をしかし、それは動作しません。私のミス

Answer 1

ではどこで、簡単かつ最善の方法は、ちょうどflexWrapであなたのビュー内のマップ関数を呼び出し、flexWrapを持つ単一のビューを使用して、アレイにあなたのすべての画像を保存していると思います。

render(){ 
    return(
      <View style={styles.gridView}> 
        {imagesArray.map((image, index) => this.renderImage(image, index))} 
      </View>); 
} 
renderImage=(image, index)=>{ 
    return (
      <Image .../>[![Hope it will help , you can show your images like this way.][1]][1] 
     ); 
} 

const styles = { 
    gridView: { 
     paddingVertical: 10, 
     marginHorizontal: 20, 
     flexDirection: 'row', 
     flexWrap: 'wrap', 
     alignItems: 'center', 
     justifyContent: 'center', 
    }, 
} 

Answer 2

未知数のカップルは、今があります。

• this.imagesの内側にあるもの？
• は何ですか？

だから、この答えでは、カップルの仮定があります

[ 
(<Image 
    style={styles.image} 
    source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} 
/>), 
(...) 
] 

---

の場合：

• this.imagesのようなN個の要素を持つ画像成分の配列ですロジックを少し抽象化すると、次のようなものが得られます。

  // `this.images` seems to be a little sturdy for now so instead we will 
      // have an `imagesPerRow` method that takes in the number of 
      // images that we want on each `row` 
      imagesPerRow(number) { 
       const img = []; 
       for(let i = 0; i < number; i++) { 
       img.push(
        <Image 
        style={styles.image} 
        source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} 
        /> 
       ); 
       } 
       return img; 
      } 
      // the `getRow` method wrap the array of images inside a `View` element 
      // Here number will be the number of images inside it 
      getRow = (number) => { 
       return (
       <View style={styles.row}> 
       { this.imagesPerRow(number) } 
       </View> 
      ); 
      } 
  
      // drawTable takes two parameters rowNum (amount of rows)and 
      // columnNum (amount of columns), these will render the actual table 
      drawTable(rowNum, columnNum) { 
       const rows = [] 
       for(let i = 0; i < rowNum; i++) { 
       rows.push(this.getRow(columnNum)); 
       } 
       return rows; 
      } 
  
      // In the render method we just call the `drawTable` with the desired params 
      render() { 
       return (
       <View style={styles.container}> 
        { this.drawTable(10, 4) } 
       </View> 
      ); 
      } 
  

  そうでない場合、それはあなたが私が作成したworking exampleを見つけることができ、ここで

  const styles = StyleSheet.create({ 
       container: { 
       flex: 1, 
       alignItems: 'stretch', 
       justifyContent: 'center', 
       paddingTop: Constants.statusBarHeight, 
       backgroundColor: '#222222', 
       }, 
       image: { 
       width: 50, 
       height: 50 
  
       }, 
       row: { 
       flex:1, 
       flexDirection:'row', 
       justifyContent: 'space-around', 
       alignItems: 'center' 
       } 
      }); 
  

  すべて窮屈になります、心の中でスタイリングを維持することが重要です。

  これが役に立ちます。