将孩子包裹在视图中反应原生答案

【问题标题】：Wrap children inside view React native将孩子包裹在视图中反应原生
【发布时间】：2018-02-18 08:03:30
【问题描述】：

我有以下代码：

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

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

【问题讨论】：

感谢 sooraj 发布此内容。我花了很多时间试图让一排按钮被包裹起来，所以你的问题和答案对我有帮助

标签： css reactjs react-native flexbox react-native-flexbox

【解决方案1】：

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

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

【讨论】：