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

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

2 个答案: