如何在 react native 的不同屏幕中调整图像大小

Question

我是反应原生的新手。我想在不同的屏幕上调整图像大小。例如，如果手机的屏幕更大，我想使用更大的图像。我将以下代码放在我的视图容器中：

<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

以下代码对我有用，

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

图像被拉伸以获得外部弯曲尺寸。

Answer 2

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

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