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

Posted

技术标签:

【中文标题】将孩子包裹在视图中反应原生【英文标题】: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
,

【讨论】:

以上是关于将孩子包裹在视图中反应原生的主要内容,如果未能解决你的问题,请参考以下文章

反应原生在视图的一侧添加边框

(反应原生)如何使用地理定位将地图视图集中在用户身上

反应原生相机视图

与成长中的孩子反应本机滚动视图

反应原生:不透明视图中的透明视图

如何将值传递给正在加载反应本机应用程序的 Web 视图