javascript - React Native：将正方形放入容器中

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 电话上，第一行比大再大，第二行比大高。

第一行的正方形是正确的，但是第二行的正方形超出了边距。我可以在 row_2 中手动设置 flexDirection: 'row' 以达到预期的效果，但这只是因为我知道容器高于更大。如何在不指定弯曲方向的情况下获得相同的结果？

沙箱在这里

标签： javascriptcssreact-nativeflexbox

Answer 1

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

或者，您可以获取以像素为单位的视口尺寸：

//e.g.

 document.documentElement.clientWidth
 document.documentElement.clientHeight

//or including scrollbar:
 window.innerWidth
 window.innerWidth

然后使用诸如情感之类的 CSS 样式库，在您的样式中使用视口尺寸。