native base 样式坑

react native 虽然有调样式神器，但是用的样式插件往往会满足不了需求
以下使用native-base样式组件，展示如何设置以下样式

以下是样式代码

<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的样式，核心代码应该是

• alignSelf : 'stretch'
  让每个Button的大小相等，调了很久才发现是这个样式操作的

最后是Text的样式，核心代码应该是

• paddingLeft：0
• paddingRight： 0
• alignSelf: 'center'
  因为自定义的左右边距较款，导致内容显示不全，于是设置padding控制左右边距为0，再通过alignSelf进行居中即可