如何在 React Native 中调整不同屏幕中的图像大小

Question

我是 React Native 的新手。我想在不同的屏幕上调整图像的大小。例如，如果单元格 phone 的屏幕更大，我想使用更大的图像。我将以下代码放入我的视图容器中：

<Image style={styles.img}
          source={require('myimage')}
        />
                <Text style={styles.item_normal}>Test1</Text>
                    <Text style={styles.itemInfo_small}>Test2</Text>

        <Button_yellow  onPress={ () => { this.onPressEnter() }}  label="Enter" icon="yellow" />

这是我的风格：

const styles = StyleSheet.create({
        container: {
        flex: 1,
            backgroundColor: '#FFFFFF',
            width: Dimensions.get('window').width,
            height: Dimensions.get('window').height,
        },
      img: {
    width: 100, 
    height: 80,
    marginTop: 10,
        marginBottom: 10,
    },
    itemInfo_small: {
            fontSize: 12,
            color: '#000000',
            textAlign: 'center',
        marginBottom: 5,
        },

你能帮我看看如何调整它的大小吗？

Answer 1

您可以像这样使用百分比：

width: Dimensions.get('window').width * percentage / 100,
height: Dimensions.get('window').height * percentage / 100

Answer 2

以下代码对我有用，

<Image style={{flex: 1,
               width: null,
               height: null}}
               source={require('myimage')}
/>

图像被拉伸以适应外部 Flex 尺寸。

如何在 React Native 中调整不同屏幕中的图像大小

How to resize an image in different screens in react native

react-native

image-resizing