react native 雖然有調(diào)樣式神器，但是用的樣式插件往往會滿足不了需求
以下使用native-base樣式組件，展示如何設(shè)置以下樣式

以下是樣式代碼

<View style={{flex: 1, marginRight: 10, alignItems: 'center', justifyContent: 'center'}}>
                <Button onPress={
                    this.selectFilterChildItem()
                } style={[{ height: 35, alignItems: 'center', justifyContent: 'center', alignSelf: 'stretch'},{backgroundColor: item.TypeName==='查看更多>' ? 'rgba(0, 0, 0, 0)' : '#f4f4f4' }]}>
                    <Text style={[{fontSize: 14, justifyContent: 'center', alignItems: 'center', paddingLeft: 0, alignSelf: 'center', paddingRight: 0},{color:item.TypeName==='查看更多>'?'#3393F2' : '#444444'}]}>{item.TypeName}</Text>
                </Button>
            </View>

這個是渲染Item的組件，父組件是FlatList
首先View的樣式

• flex
• marginRight
• alignItems
• justifyContent
  具體就是讓每個Item居中，并且有10的間隔

其次Button的樣式，核心代碼應(yīng)該是

• alignSelf : 'stretch'
  讓每個Button的大小相等，調(diào)了很久才發(fā)現(xiàn)是這個樣式操作的
  stretch是指填充滿豎直方向上的空間，而此時用center是不能居中的

最后是Text的樣式，核心代碼應(yīng)該是

• paddingLeft：0
• paddingRight： 0
• alignSelf: 'center'
  因?yàn)樽远x的左右邊距較寬，導(dǎo)致內(nèi)容顯示不全，于是設(shè)置padding控制左右邊距為0，再通過alignSelf進(jìn)行居中即可