React-Native Layoutformatierung für FlatList

Question

Ich versuche, Daten auf dem Bildschirm in einem nebeneinander Layout-Layout zu listen. Kurz gesagt, ich versuche zu simulieren ist der Float: linke Fähigkeiten mit HTML und CSS. Jede Zeile enthält zwei Karten, die formatiert sind Tags anzeigen. Aus irgendeinem Grund scheinen sie in einer einzigen Spalte Mode den ganzen Weg nach unten auf dem Bildschirm links ausgerichtet statt. Was mache ich falsch mit meinem Stylesheet, um dieses vertikale Ausrichtungsproblem zu verursachen?

screen.js: 
<View style={{flexDirection: 'row', backgroundColor: '#ffffff'}}> 
<StatusBar translucent={false} barStyle="default" /> 
    <FlatList 
data={myList} 
renderItem={({ item }) => (
    <View style={style.outerContainer}> 
     <Image source={require('../../../../images/NoImageAvailable.png')} style={style.profileUrl} /> 
     <TouchableHighlight onPress={onPress}> 
      <View style={style.textContainer}> 
       <Text style={style.mainHeading}>{item.name}</Text> 
      </View> 
     </TouchableHighlight> 
    </View> 
)} 
/> 
</View> 



style.js: 
export default EStyleSheet.create({ 
    outerContainer: { 
     width: 150, 
     alignItems: 'center', 
     justifyContent: 'center', 
     marginLeft: 5, 
     marginRight: 5, 
     marginTop: 20, 
     borderWidth: 3, 
     borderColor: '#e9e9e9', 
     borderBottomLeftRadius: 10, 
     borderBottomRightRadius: 10, 
     borderTopLeftRadius: 10, 
     borderTopRightRadius: 10 
    }, 
    profileUrl: { 
     width: 120, 
     height: 120, 
     marginLeft: 10, 
     marginRight: 10, 
     marginTop: 10, 
     resizeMode: 'contain' 
    }, 
    textContainer: { 
     width: 120, 
     height: 75, 
     alignItems: 'center', 
     justifyContent: 'center', 
     marginLeft: 10, 
     marginRight: 10, 
     marginTop: 10, 
     marginBottom: 10, 
     paddingLeft: 10, 
     paddingRight: 10, 
     paddingTop: 10, 
     paddingBottom: 10, 
     backgroundColor: '#f8f8f8', 
     borderWidth: 3, 
     borderColor: '#e9e9e9', 
     borderBottomLeftRadius: 10, 
     borderBottomRightRadius: 10, 
     borderTopLeftRadius: 10, 
     borderTopRightRadius: 10 
    }, 
    mainHeading: { 
     fontSize: 16, 
     fontFamily: 'Arial', 
     fontWeight: '600' 
    }, 
    bodyText: { 
     fontSize: 14, 
     fontFamily: 'Arial' 
    } 
}); 

Answer 1

Von dem, was ich verstehe Sie zwei Elemente der Flach Liste nebeneinander zu setzen versuchen, wenn ja, haben Sie numColumns={2} auf Ihre flache Liste Einstellung versucht?

Oder wenn Sie über Ihr Bild und Text sprechen, versuchen Sie flexDirection zu Ihrem outerContainer einzustellen.