1.Text设置背景色，圆角丢失。

        <View style={{ height: 64, width: 64,borderRadius: 12,justifyContent:'center' }}>
          <Text style={{ flex: 1 ,color:'#fff',fontSize:24,textAlign:'center',backgroundColor:'#ff0000'}}>1</Text>
        </View>

WX20181126-113058@2x.png

解决办法:背景色设置在View的styles属性中。

<View style={{ height: 64, width: 64,borderRadius: 12,justifyContent:'center',backgroundColor:'#ff0000'}}>
          <Text style={{ flex: 1 ,color:'#fff',fontSize:24,textAlign:'center'}}>1</Text>
        </View>

WX20181126-113259@2x.png

2.垂直居中:给Text在外层包一层View或添加lineHeight。

添加View:

        <View style={{ height: 64, width: 64,borderRadius: 12,backgroundColor:'#ff0000',justifyContent:'center'}}>
          <Text style={{color:'#fff',fontSize:24,textAlign:'center'}}>1</Text>
        </View>

添加lineHeight:

<Text style={{width:64,height:64,backgroundColor:'#ff0000',color:'#fff',fontSize:24,textAlign:'center',lineHeight:64}}>1</Text>

WX20181126-114725@2x.png

badgeView:

        <View style={{ height: 48, width: 48,borderRadius: 24,backgroundColor:'#ff0000',justifyContent:'center'}}>
          <Text style={{color:'#fff',fontSize:42,alignSelf:'center'}}>1</Text>
        </View>

WX20181126-145353@2x.png