在视图中包裹 children React native

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

如何将 child 元素包裹在 parent 元素中，使其不会像图中所示那样溢出？

Answer 1

对于 flexbox，你有 flexWrap 属性，它定义了 flex 项目是强制在一行中还是可以换行。默认设置为 nowrap。将其设置为 wrap:

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

在视图中包裹 children React native

Wrap children inside view React native

css

flexbox

reactjs

react-native

react-native-flexbox