用网格间隙反应本机网格

Question

我正在尝试制作React Native网格布局，但我快要疯了。首先，我有这个标记：

<View style={styles.screen}>
  ...
  <View style={styles.parent}>
    <View style={styles.children}><Text>1</Text></View>
    <View style={styles.children}><Text>2</Text></View>
    <View style={styles.children}><Text>3</Text></View>
    <View style={styles.children}><Text>4</Text></View>
    <View style={styles.children}><Text>5</Text></View>
    <View style={styles.children}><Text>6</Text></View>
    <View style={styles.children}><Text>7</Text></View>
    <View style={styles.children}><Text>8</Text></View>
  </View>
</View>

还有样式，我目前有：

const styles = StyleSheet.create({
  screen: {
    padding: 10
  },
  parent: {
    flexDirection: 'column',
    flexWrap: 'wrap'
  },
  children: {
    margin: 5
  }
});

我想要的最大列数是3，所以它应该是这样的：

我尝试使用Window宽度进行一些演算，减去主包装（屏幕）的填充，但没有任何效果。