React Native实现图片固定在应用底部的问题与解决方案

我试了好多种办法想把图片固定在应用底部，可一直没搞定——能看到带红色边框的图片和底部之间留了一大片空白，但图片已经裁剪过了，底部不该有这些多余空间。

初始代码 #

const TubeBoard = () => ( 
  <View style={styles.container}> 
    <Image source={bigTube} style={styles.imageStyle} resizeMode="contain" /> 
  </View> 
); 

const styles = StyleSheet.create({
  container: {
    justifyContent: 'flex-end',
    width: deviceWidth,
    height: deviceHeight,
  },
  imageStyle: {
    borderColor: 'red',
    borderWidth: 10,
    position: 'absolute',
    bottom: 0,
    width: '100%',
  },
});

初始效果 #

带红色边框的图片没有贴合应用底部，二者之间存在明显的多余空白区域。

解决方法 #

给容器添加*flex: 1*属性，同时为图片设置明确的高度，就能消除底部空白，让图片完美贴合底部。

最终代码 #

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    alignItems: 'flex-start',
    justifyContent: 'flex-start',
    borderColor: 'blue',
    borderWidth: 10,
  },
  imageStyle: {
    borderColor: 'red',
    borderWidth: 10,
    position: 'absolute',
    bottom: 0,
    width: deviceWidth,
    height: deviceHeight * 0.75,
  },
});

实现效果 #

带红色边框的图片完全贴合应用底部，底部多余空白彻底消失，达到预期的布局效果。

内容的提问来源于stack exchange，提问作者Chris Choy