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

在 itemIcons 类中尝试此操作 证明 - 内容：'空间'

Answer 2

将容器样式更改为

container: {
    flex: 1,
}

然后视图将根据您的要求对齐。

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>

尝试在代码中复制它，看看它是否有效。

在react-native中有一些flexbox布局的问题

3 个答案: