裹孩子內景陣營本地

我有以下代碼：裹孩子內景陣營本地

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 
    }

這是呈現以下幾種觀點：

我試圖總結白色容器內的藥丸。以下是我所使用的樣式：

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' 
    },

我如何包裝的父元素中的子元素，使得它不喜歡的節目在畫面溢出？

來源

2017-09-09 Sooraj Chandran

使用flexbox時，您具有flexWrap屬性，它定義了Flex項目是強制在一行中還是可以包裝。默認情況下，它設置爲nowrap。將其設置爲wrap：

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

來源

2017-09-09 18:19:53

裹孩子內景陣營本地

回答

相關問題