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的大小相等，调了很久才发现是这个样式操作的
stretch是指填充满竖直方向上的空间，而此时用center是不能居中的
最后是Text的样式，核心代码应该是
- paddingLeft：0
- paddingRight： 0
- alignSelf: 'center'
因为自定义的左右边距较宽，导致内容显示不全，于是设置padding控制左右边距为0，再通过alignSelf进行居中即可
