反応ネイティブフレックスボックススタイリングを使用してビューコンポーネントのグリッドを作成するバグ

Question

フレックスボックスを使用して反応ネイティブでボックスの5x5グリッドを作成しようとしています。現在のところ、私のコードはグリッドの1行しか生成していないので、なぜか分かりません。ここで

import React, { Component } from 'react'; 
import { View, Text, StyleSheet } from 'react-native'; 

class Board extends Component { 
    render() { 
    return (
     <View style={styles.container}> 
     <View style={styles.rowContainer}> 
      <View style={styles.box}></View> 
      <View style={styles.box}></View> 
      <View style={styles.box}></View> 
      <View style={styles.box}></View> 
      <View style={styles.box}></View> 
     </View> 
     <View style={styles.rowContainer}> 
      <View style={styles.box}></View> 
      <View style={styles.box}></View> 
      <View style={styles.box}></View> 
      <View style={styles.box}></View> 
      <View style={styles.box}></View> 
     </View> 
     <View style={styles.rowContainer}> 
      <View style={styles.box}></View> 
      <View style={styles.box}></View> 
      <View style={styles.box}></View> 
      <View style={styles.box}></View> 
      <View style={styles.box}></View> 
     </View> 
     <View style={styles.rowContainer}> 
      <View style={styles.box}></View> 
      <View style={styles.box}></View> 
      <View style={styles.box}></View> 
      <View style={styles.box}></View> 
      <View style={styles.box}></View> 
     </View> 
     <View style={styles.rowContainer}> 
      <View style={styles.box}></View> 
      <View style={styles.box}></View> 
      <View style={styles.box}></View> 
      <View style={styles.box}></View> 
      <View style={styles.box}></View> 
     </View> 
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    flexDirection: 'column', 
    alignItems: 'flex-start', 
    }, 
    rowContainer: { 
    flex: 1, 
    flexDirection: 'row', 
    alignItems: 'flex-start', 
    }, 
    box: { 
    flex: 1, 
    height: 60, 
    backgroundColor: 'red', 
    borderWidth: 2, 
    borderColor: 'black', 
    } 
}); 

export default Board; 

出力です：

は、ここに私のコードです

がどのように私は私のコード出力ボックスの5x5のグリッドすることができますか？

はフレックス削除あなた

Answer 1

ありがとう：私はあなたがcontainerとrowContainerの上borderWidthと異なるborderColor Sを使用する場合は

Answer 2

は、それが役立つ理由は完全にはわからないけれどもrowContainerから1問題を修正しましたflexBoxが各親子コンポーネントをレンダリングする方法を視覚化し、よりよく理解してください。