我正在尝试创建一个响应式的React Native Web应用程序，它也支持iOS和Android。
我发现似乎没有办法根据不断变化的窗口大小动态调整大小。
我想有一些卡调整大小后，窗口大小。
以下是我的风格：

MainStyles = StyleSheet.create(
    {
        card: {
            alignItems: 'center',
            justifyContent: 'space-between',
            alignSelf: "flex-end",
            marginBottom: scale(10),
            marginLeft: scale(10),
            marginRight: scale(10),
            shadowColor: colorBlack,
            shadowOffset: {
                width: 4,
                height: 4,
            },
            shadowOpacity: 0.53,
            shadowRadius: scale(3.62),
            elevation: 4,
            alignSelf: "flex-end", 
        }
    }

但是，如果我试着加上这样的话：

const window = Dimensions.get("window");

const width_proportion = (window.width * .20);
const height_proportion = (window.height * .20);

它只是在样式表中设置一个静态值，该值不会更新。
我必须在我的组件内部执行此操作，这感觉有点过于耦合：

class Card extends Component {
    constructor(props) {
        super(props);
        this.state = {
            cardSize: (Dimensions.get("window").width * .2)
        }
    }

componentDidMount() {
    if(window.addEventListener) {
        window.addEventListener('resize', this.resize)
        }
}

resize = () => {
    // Going for a square size, hence using width for both height/width.
    const window = Dimensions.get("window");
    this.setState({cardSize: (window.width * .2)})
     this.forceUpdate()
   }

render() {
return(
<View style={[MainStyles.card, { width: this.state.cardSize, height: this.state.cardSize}]}>
...
</View>
     );
   }
}

有没有一种更干净的方法可以让我将动态样式添加到React Native Web中，而无需直接在组件中生成样式？我所需要的只是在窗口动态调整大小时更新样式。