mit einem Problem mit flexbox-Layout in reaktiven nativen

Question

Ich versuche, diese hervorgehobene Linie, um volle Breite zu strecken. Ich habe viele mögliche Wege ausprobiert, aber ich konnte es nicht wie gewünscht erreichen.

Hier ist mein Code aus render() Methode.

return (
    <ScrollView style={{backgroundColor: 'rgba(255,255,255,1)'}}> 
     <View style={styles.container}> 
      <Image style={styles.image} source={{uri: imageURI}} /> 
      <View style={styles.content}> 
      <Text style={styles.title}>{news.title}</Text> 
      <View style={styles.itemIcons}> 
       <View style={styles.companyView}> 
       <Image 
        source={{uri: news.category[0].sourceImage}} 
        style={ styles.iconsImage} /> 
       <Text style={styles.iconsText}>{news.category_name}</Text> 
       </View> 
       <Text style={styles.iconsTextRight}>{this.formatDate(news.pubDate)}</Text> 

      </View> 
      <Text style={styles.description}>{description}</Text> 
      </View> 
     </View> 
    </ScrollView> 
); 

Und hier sind meine Stile dafür.

container: { 
    flex: 1, 
    alignItems: 'center', 
}, 
content: { 
    flex: 1, 
    flexDirection: 'column', 

    padding: 10 
}, 
image: { 
    width: width, 
    height: custom_height, 
    // padding: 10 
}, 
title: { 
marginBottom: 15 
}, 
itemIcons: { 
    flex: 1, 
    flexDirection: 'row', 
    alignSelf: 'stretch', 

    marginBottom: 15 
}, 
iconsImage: { 
    height: 25, 
    width: 30, 
    marginRight: 10, 
}, 
iconsText: { 
    fontSize: 12, 
    color: "#686666", 
    alignSelf: 'flex-end' 
}, 
companyView: {flex:1,flexDirection:'row'}, 
dateView: {flex:1,alignSelf: 'flex-end'}, 
iconsTextRight: { 
    fontSize: 12, 
    color: "#686666", 
    alignSelf: 'flex-end' 
}, 
description: { 
    padding: 2, 
    fontSize: 12, 
    color: '#323' 
} 

Answer 1

ändern Container Stil

container: { 
    flex: 1, 
} 

Dann wird die Ansicht nach ausgerichtet werden, um Ihre Anforderung.

Answer 2

versuchen, dies in itemIcons Klasse rechtfertigen Inhalt: 'raum zwischen'

Answer 3

Ich konnte nicht mit Ihrem gesamten Code arbeiten, aber wie auf dem Screenshot, den Sie gepostet haben, konnte ich dies erreichen.

<View style={{flex:1}}> 
     <View style={{flexDirection:'row',paddingTop:100,justifyContent:'space-between',alignItems:'center'}}> 
       <View style={{flexDirection:'row',alignItems:'center'}}> 
       <Image source={require('./images/tiger.jpg')} style={{width:40,height:40}} /> 
       <Text>Roche</Text> 
       </View> 
       <Text>25 Mar 2016, 18:16</Text> 
      </View> 
     </View> 

Versuchen Sie dies in Ihrem Code zu replizieren und sehen, ob es funktioniert.