Question

我想让图片贴在应用的底部。我该怎么做？我尝试了不同的堆栈溢出解决方案，但我仍然无法得到结果。如您所见，红色边框和图像之间有一个很大的空白区域。图像是修剪的，下面不应有额外的空间。提前谢谢！

 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%',
  },
});

screenshot here

已解决：将{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,
  },
});

desired result

Answer 1

我相信你的容器视图没有填满整个屏幕。尝试将flex:1添加到容器样式中。

Answer 2

const styles = StyleSheet.create({
  container: {
    ...
  },
  imageStyle: {
    borderColor: 'red',
    borderWidth: 10,
    width: deviceWidth,
    height: 100
  },
});

Answer 3

通过将{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,
  },
});

React-native将图像粘贴到底部

3 个答案: