React Native: fit square in container

Question

我有以下代码:

import React from "react";
import { StyleSheet, View } from "react-native";
function App() {
return (
<View style={styles.container}>
<View style={styles.row_1}>
<View style={styles.square} />
</View>
<View style={styles.row_2}>
<View style={styles.square} />
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1
},
row_1: {
flex: 1,
backgroundColor: "red",
alignItems: "center",
padding: 10
},
row_2: {
flex: 5,
backgroundColor: "blue",
alignItems: "center",
//flexDirection: 'row',
padding: 10
},
square: {
flex: 1,
aspectRatio: 1,
backgroundColor: "white"
}
});
export default App;

我试图在行中心插入一个白色的正方形，而不知道先验的行的高度和宽度。在这个例子中，在4:3的手机上，第一行大于大于，第二行大于大于。

第一行的正方形是正确的，但第二行的正方形超出了边距。我可以手动设置flexDirection: '行'在row_2中达到预期的结果，但只是因为我知道容器比大。我怎样才能达到相同的结果，而不指定弯曲方向?

沙箱这里

Answer 1

不确定你想要的最终结果是什么，但对于像这样的响应性，我会考虑在你的正方形上使用宽度/高度属性的动态单位，如视口单位——vw, vh, vmin, vmax。

或者你可以得到以像素为单位的视口尺寸:

//e.g.
document.documentElement.clientWidth
document.documentElement.clientHeight
//or including scrollbar:
window.innerWidth
window.innerWidth

然后使用css样式库，如情感，在你的样式中使用视口尺寸。