reactNative中图片按比例显示

在React Native中，可以使用Image组件来显示图片，并且可以通过设置resizeMode属性来控制图片的显示方式。

如果想要按比例显示图片，可以将resizeMode属性设置为contain。这样图片将会按照图片的原始比例缩放，直到图片的宽度或高度中的一个与容器相等。

以下是一个示例代码：

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

const App = () => {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Image
        source={{ uri: 'https://example.com/image.jpg' }}
        style={{ width: 200, height: 200, resizeMode: 'contain' }}
      />
    </View>
  );
};

export default App;

在上面的例子中，Image组件的resizeMode属性被设置为contain，并且设置了固定的宽度和高度。这样图片将会按照图片的原始比例缩放，直到宽度或高度中的一个与容器相等。

注意，如果图片的宽高比例与容器的宽高比例不一致，图片可能会出现留白。如果想要填满容器，可以将resizeMode属性设置为cover，这样图片将会按照图片的原始比例缩放，直到宽度和高度都与容器相等。