반응 네이티브에서 플렉스 박스 레이아웃에 약간의 문제가있다.

Question

나는 강조 표시 한 선을 전체 너비로 늘리려 고하고있다. 나는 여러 가지 가능한 방법을 시도해 왔지만 원하는대로 얻을 수는 없었다.

여기 render() 방법에서 내 코드입니다.

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> 
); 

여기 내 스타일이 있습니다.

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

변경 컨테이너 스타일의 뷰가에 따라 정렬됩니다 그런 다음

container: { 
    flex: 1, 
} 

에 당신의 요구 사항.

Answer 2

는 itemIcons 클래스에서 이것을 시도 콘텐츠 정당화 '공간 사이의'

Answer 3

게시자가 게시 한 스크린 샷에 따라 코드 전체에서 작동하지 못했지만이를 수행 할 수있었습니다.

<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> 

봅니다 코드에서이 복제하고 작동하는지 확인합니다.