如何使用 flexbox 和 React-Native 使裁剪后的图像填充所有视图？答案

【问题标题】：How to make a cropped image fill all the View with flexbox and React-Native?如何使用 flexbox 和 React-Native 使裁剪后的图像填充所有视图？
【发布时间】：2020-07-27 22:02:42
【问题描述】：

我想制作一个裁剪后的图像来填充我应用中的所有视图。

我的代码现在是这样的：

但我希望这个荷马吃甜甜圈的小方块填满整个屏幕，就像我做的这个模拟一样：

这是我的代码：

import * as React from 'react';
import { View, Image, StyleSheet } from 'react-native';

export default class CroppedImage extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.cropped}>
          <Image
            style={styles.image}
            source={{
              uri:
                'https://upload.wikimedia.org/wikipedia/en/0/02/Homer_Simpson_2006.png'
            }}
          />
        </View>
      </View>
    );
  }
}

const OFFSET_LEFT = 0;
const OFFSET_TOP = 0;
const IMAGE_WIDTH = 239 * 1.5;
const IMAGE_HEIGHT = 391 * 1.5;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#6699CC'
  },

  bg: {
    opacity: 0.25,
    width: IMAGE_WIDTH,
    height: IMAGE_HEIGHT
  },

  image: {
    marginLeft: -OFFSET_LEFT,
    marginTop: -OFFSET_TOP,
    width: IMAGE_WIDTH,
    height: IMAGE_HEIGHT
  },

  cropped: {
    width: 150,
    height: 150,
    overflow: 'hidden',
    position: 'absolute'
  }
});

这里有什么帮助吗？

【问题讨论】：

标签： javascript css react-native flexbox react-native-flexbox

【解决方案1】：

尝试将属性 resizeMode 添加到 Image 中，如下所示：

 <Image
    style={styles.image}
    source={{
    uri:'https://upload.wikimedia.org/wikipedia/en/0/02/Homer_Simpson_2006.png'
    }}
    resizeMode:'contain'
 />

让我知道它是否有效！

【讨论】：

它不编译 Lahkin。我认为 resizeMode 它不是 Image 的道具

【解决方案2】：

尝试像这样将 resizeMode 添加到样式中：

image: {
    marginLeft: -OFFSET_LEFT,
    marginTop: -OFFSET_TOP,
    width: IMAGE_WIDTH,
    height: IMAGE_HEIGHT,
    resizeMode: "contain"
  },

您可以在此处的文档中阅读更多信息：

https://reactnative.dev/docs/image#resizemode

【讨论】：