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

Posted 2023-03-06

【中文标题】将孩子包裹在视图中反应原生

【英文标题】：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 发布此内容。我花了很多时间试图让一排按钮被包裹起来，所以你的问题和答案对我有帮助

【参考方案1】：

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

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