Question

//如何在不损失宽高比的情况下将图像设置在屏幕顶部？

[![import React, { Component } from 'react';
    import { AppRegistry, View, Image, StyleSheet } from 'react-native';
    export default class DisplayAnImageWithStyle extends Component {
      render() {
        return (
          <View style={{flex:1}}>
            <Image
              resizeMode="contain"
              style={{flex:1}}
              source={{uri: 'https://i.pinimg.com/originals/ba/84/1c/ba841cc07934b508458a7faea62141a8.jpg'}}
            />
          </View>
        );
      }
    }

    // Skip these lines if you are using Create React Native App.
    AppRegistry.registerComponent(
      'DisplayAnImageWithStyle',
      () => DisplayAnImageWithStyle
    );][1]][1]

//在这里，喜欢的图像显示它不合适，没有从顶部显示...您是否知道如何设置图像而无填充？ [1]：https://i.stack.imgur.com/LYNKn.png

Answer 1

因此，您可能想使用高度和宽度都为resizeMode: 'cover'的

<Image
  resizeMode="contain"
  style={{ width: 200, height:220, resizeMode: 'cover'}}
  source={{uri: 'https://i.pinimg.com/originals/ba/84/1c/ba841cc07934b508458a7faea62141a8.jpg'}}
 />

下面是一个示例https://snack.expo.io/HJTFg9tU4

让我知道这是否对您有用。

您如何使图像适合本机反应？

1 个答案: