Wrap Kinder Innenansicht Reagieren nativer

Question

Ich habe den folgenden Code:

renderActionButtons(actionButtons){ 

    let actionButtonsContent = actionButtons.map((button, i) => { 
     return <TouchableHighlight key={i} onPress={() => {this.updateConversation(button);}} style={globalStyle.actionButton} underlayColor='#f1f1f1'> 
     <View key={i}> 
     <Text style= {globalStyle.actionButtonText}>{ button }</Text> 
     </View> 
     </TouchableHighlight>       
    }) 
    return actionButtonsContent 
    } 

    renderConversations(){ 
    let conversationContent = this.state.conversationArray.map((convObj, i) => { 
     return <View key={i} style={[globalStyle.conversationContainer,globalStyle.shadow,convObj.directionClass]}> 
     <Text style= {[globalStyle.conversationText,convObj.directionTextClass]}>{ convObj.text }</Text> 
     <View style= {globalStyle.actionButtonsContainer}> 
      { this.renderActionButtons(convObj.actionButtons) } 
     </View> 
     </View>        
    }) 
    return conversationContent 
    } 

Dies ist die folgende Ansicht zu machen:

Ich versuche, diese Pillen in den weißen Container zu wickeln. Im Folgenden sind die Stile die ich verwendet habe:

conversationContainer:{ 
    maxWidth:310, 
    backgroundColor: 'white', 
    borderBottomRightRadius: 10, 
    borderTopRightRadius: 10, 
    borderBottomLeftRadius: 0, 
    borderTopLeftRadius: 10, 
    padding: 10, 
    marginTop: 10 
    }, 
actionButtonsContainer:{ 
    flex:1, 
    flexDirection: 'row', 
    paddingTop: 10 
    }, 
    actionButton:{ 
    backgroundColor:primaryRed, 
    borderRadius:30, 
    padding: 7, 
    marginRight: 10 
    }, 
    actionButtonText:{ 
    color:'white', 
    fontSize:12, 
    alignSelf: 'center' 
    }, 

Wie kann ich die untergeordneten Elemente innerhalb des übergeordneten Element wickeln, so dass er nicht überläuft wie zeigen in der Abbildung?

Answer 1

Mit flexbox haben Sie die Eigenschaft flexWrap, die definiert, ob die Flex-Elemente in einer einzelnen Zeile erzwungen oder umgebrochen werden können. Standardmäßig ist es auf nowrap eingestellt. Stellen Sie es auf wrap:

actionButtonsContainer:{ 
    flex:1, 
    flexDirection: 'row', 
    flexWrap: 'wrap', 
    paddingTop: 10 
},