2016-04-06 13 views
3

Ich habe kürzlich meine Hände auf reactive-native gelegt und versuche, Schaltflächen dynamisch zu einer Ansicht hinzuzufügen. Ich möchte eine Struktur haben, wie:Gewusst wie: Hinzufügen von Schaltflächen Grid-Stil in React Native?

(in Bootstrap ich eine Klasse mit col-md-4 hinzufügen würde)

[A] [A] [A] [A] 

[A] [A] [A] [A] 

[A] [A] [A] [A] 

ich bereits die Schaltflächen hinzufügen kann, aber sie immer in einer neuen Zeile erscheinen .

dh

[A] 
[A] 
[A] 

die zusätzlichen Stil und Funktion, die ich bisher habe:

const styles = StyleSheet.create({ 
    container: { 
     marginTop: 65, 
     flex: 1, 
    }, 
}) 

render(){ 
    return (
     <View style={styles.container}> 
      {this.renderButtons()} 
     </View> 
    ) 
} 
renderButtons(){ 
    var list = myArray.map((item, index) => { 
     return (
      <View key={index}> 
       <TouchableHighlight 
        style={styles.button}> 
       </TouchableHighlight> 
      </View> 
     ) 
    }) 
    return list; 
} 

Ich weiß, ich sollte einen bestimmten Stil, um die Ansicht unter renderButtons hinzufügen, aber ich weiß nicht, wo anfangen. Noch.

Antwort

2

Der richtige Weg, dies zu tun ist, flexWrap: "wrap" in Ihre Designs zu verwenden.