裹孩子内景阵营本地

我有以下代码：裹孩子内景阵营本地

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

我如何包装的父元素中的子元素，使得它不喜欢的节目在画面溢出？

来源

2017-09-09 Sooraj Chandran

使用flexbox时，您具有flexWrap属性，它定义了Flex项目是强制在一行中还是可以包装。默认情况下，它设置为nowrap。将其设置为wrap：

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

来源

2017-09-09 18:19:53

裹孩子内景阵营本地

回答

相关问题