React Native Web 持续移除样式中aspectRatio属性，如何阻止该行为？

问题原因排查&解决办法 #

• 首先你的第二种写法完全不符合React Native样式规范：style属性接收的是合法JS对象，需要是{属性名: 属性值}的键值对格式，你直接写字符串{'aspect-ratio: 4 /3'}属于语法错误，该写法直接作废，仅保留第一种驼峰命名的写法。
• 确认你的React Native项目版本：aspectRatio是React Native 0.40及以上版本才支持的属性，若你的项目版本低于该要求，该属性会被自动忽略，要么升级RN版本，要么使用下方的手动计算变通方案。
• 排查冲突样式：不要给设置了aspectRatio的View同时设置固定width和height，仅需设置其中一项，另一项会自动按比例计算；若宽高都不设置，View会先撑满父容器的主轴尺寸，再按比例计算另一轴的尺寸。
• 排查父容器限制：若父容器设置了错误的布局规则挤压子元素，你可以先给父容器添加flex: 1属性测试，或者单独将该View放到空白页面验证aspectRatio是否生效。

低版本RN兼容变通方案

如果无法升级RN版本，可以通过onLayout回调手动计算高度实现4:3比例：

import { useState } from 'react';
import { View } from 'react-native';

const Component = () => {
  const [viewHeight, setViewHeight] = useState(0);

  const handleLayout = (e) => {
    const { width } = e.nativeEvent.layout;
    // 4:3比例 高度=宽度*3/4
    setViewHeight(width * 3 / 4);
  };

  return (
    <View 
      style={{ width: '100%', height: viewHeight }} 
      onLayout={handleLayout}
    >
      {Content}
    </View>
  );
};

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