React Native如何实现尺寸为屏幕宽度指定百分比的正方形图片

你之前的百分比写法不生效，是因为React Native中样式的高度百分比默认参照父容器的高度，宽度百分比参照父容器宽度，两者基准不一致，因此无法直接生成等比例正方形。

直接获取屏幕宽度后按所需比例赋值给宽高即可，逻辑简单直观：

1. 首先导入Dimensions工具：

import { Dimensions, StyleSheet, Image } from 'react-native';

2. 获取屏幕宽度后按比例计算正方形边长：

// 获取屏幕宽度
const screenWidth = Dimensions.get('window').width;
// 假设需要占屏幕宽度的50%，则边长为 screenWidth * 0.5
const targetPercentage = 0.5;
const squareSize = screenWidth * targetPercentage;

const styles = StyleSheet.create({
  image: {
    width: squareSize,
    height: squareSize,
  }
});

如果需要适配屏幕旋转场景，可以监听Dimensions的change事件，在屏幕尺寸变化时更新边长即可。

利用React Native中padding的百分比值默认参照父容器宽度的特性，无需主动获取屏幕尺寸，自动适配屏幕旋转等场景：

const styles = StyleSheet.create({
  // 外层容器设置比例
  imageWrapper: {
    width: '50%', // 填写你需要的屏幕宽度占比
    paddingTop: '50%', // 与width的值保持完全一致，即可得到正方形
    position: 'relative',
  },
  // 图片绝对定位撑满容器
  image: {
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    resizeMode: 'cover' // 按需调整图片裁剪模式
  }
});

组件使用示例：

<View style={styles.imageWrapper}>
  <Image source={你的图片资源地址} style={styles.image} />
</View>

该方案同时适配父容器不是全屏宽度的场景，比如父容器占屏幕80%宽度时，你需要占父容器50%宽度的正方形，直接修改imageWrapper的width和paddingTop为50%即可。

内容的提问来源于stack exchange，提问作者figbar