将孩子包裹在视图中反应原生
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
,
【讨论】:
以上是关于将孩子包裹在视图中反应原生的主要内容,如果未能解决你的问题,请参考以下文章