css - 将孩子包裹在视图中反应原生

Question

我有以下代码：

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

如何将子元素包装在父元素内，使其不会像图片中显示的那样溢出？

Answer 1

使用 flexbox，你有flexWrap属性，它定义了 flex 项目是强制在一行中还是可以被包裹。默认情况下，它设置为nowrap. 将其设置为wrap：

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