用图像反应本机填充剩余空间答案

【问题标题】：Fill remaining space with image react native用图像反应本机填充剩余空间
【发布时间】：2019-06-03 19:55:38
【问题描述】：

这是我的主视图，我在第二个子视图中有图像。我遇到的问题是，我希望该视图组件中的图像填充剩余空间，但没有运气。知道如何实现吗？我尝试在高度和宽度上都使用 null，但它根本没有显示任何图像。 resizeMode="cover" 也不起作用。 flex 属性适用于其他视图，但不适用于图像，不知道为什么。

<View style={{flex:1}}>
    <ProgressBar progress={0.3} width={width} color={"#ff0000"} />

    <View style={{flexDirection: 'row', marginTop: 10, alignItems: 'center', flex: 0.2}}>
      <Image style={styles.userImageStyle} source={{uri: item.item.userImage}} />
      <Text style={{marginLeft: 10}}>
        {item.item.username}
      </Text>
    </View>

    <View style={{flex: 0.8, marginTop: 20}}>
      <Image style={{width: null, height: null, flex:1}} resizeMode="cover" source={{uri: item.item.posts[0].imageUrl}} />
    </View>

  </View>

【问题讨论】：

确实给出了静态 { height: 150 and width:150 } （比方说）显示图像？
是的，它给了。但不知道如何用剩余的高度填充窗口的其余部分！

标签： react-native

【解决方案1】：

使用 undefined 而不是 null。它应该工作

<View style={{flex: 0.8, marginTop: 20}}>
      <Image style={{width: undefined, height: undefined, flex:1}} resizeMode="cover" source={{uri: item.item.posts[0].imageUrl}} />
    </View>

【讨论】：

【解决方案2】：

当你给 flex 1 时，给定宽度 '100%' 和高度将为空，然后图像将显示在其余空间上

你可以使用这个代码

<View style={{flex: 0.8, marginTop: 20}}>
   <Image style={{width: '100%', height: null, flex:1}} resizeMode="cover" source= 
 {{uri: item.item.posts[0].imageUrl}} />
</View>

【讨论】：