React Native：适合容器中的正方形

Question

I have the following code:

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;

I'm trying to insert a white square in the center of the rows, without knowing a priori the height and the width of the rows. In the example, on a 4:3 phone, the first row is larger then higher and the second row higher than larger.

The square in the first row is correct, but the square in the second row exceeds the margins. I can manually set flexDirection: 'row' in the row_2 to achieve the expected result, but just because I know the container is higher than larger. How can I achieve the same result, without specifing the flex direction?

Sandbox here

Answer 1

Not exactly sure what the final result you're looking for, but for something responsive like this I would consider using a dynamic unit on width/height properties on your squares like viewport units -- vw, vh, vmin, vmax.

Alternatively you can get the viewport dimensions in pixels:

//e.g.

 document.documentElement.clientWidth
 document.documentElement.clientHeight

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

Then use a css styles library like emotion use the viewport dimensions in your styles.