react-native：親ビューで子供を整理する

Question

私はこのビューに 'cards'を入れています。 ビューに完全に表示されないコンポーネントを追加すると、次の行に移動したいと考えています。

これは私のカードのコンポーネントです：

<TouchableOpacity 
    style={{ 
     borderRadius: 9, 
     borderBottomRightRadius: 9, 
     margin: 9, 
    }} 
    onPress={this.props.onPress} 
    > 

    <Image style={{ 
     borderRadius: 9, 
     opacity: 3, 
     width: 93, 
     height: 93, 
     tintColor: '#976D2B' 
    }} 

     source={this.props.source} 
    /> 

    <Text style={{ 
     borderRadius: 9, 
     color: '#63461E', //brown 
     fontWeight: 'bold', 
     fontSize: 16, 
     textAlign: 'center', 
    }}> 
     {this.props.text} 
    </Text> 

    </TouchableOpacity> 

これは、画面コードです：

<View 
         style={{flexDirection: 'row', alignContent: 'center', alignItems: 'center', justifyContent: 'flex-end'}} 
        > 

         {/*card 1*/} 
         <Card 
          onPress={() => navigate('General')} 
          source={require('../resources/icons/information.png')} 
          text={'General Info'} 
         > 
         </Card> 

         {/*card 2*/} 
         <Card 
          onPress={() => navigate('Grades')} 
          source={require('../resources/icons/information.png')} 
          text={'Grades'} 
         > 
         </Card> 

         {/*card 3*/} 
         <Card 
          onPress={() => navigate('Grades')} 
          source={require('../resources/icons/information.png')} 
          text={'Lunch Menu'} 
         > 
         </Card> 

         {/*card 4*/} 
         <Card 
          onPress={() => navigate('Grades')} 
          source={require('../resources/icons/information.png')} 
          text={'Bell Schedules'} 
         > 
         </Card> 

        </View> 

*私は

を貼り付けそして、いくつかの背景でたときに申し訳くぼみが台無ししまった、私は反応ナビゲーションを使用しています。

現在、4枚のカードが存在し、そのうち3枚はプレーンビューですが、4枚目は半分のオフスクリーンです。

ありがとうございます。

Answer 1

ニムロッドは、あなたが `flexWrap`を使用してみました