带有中心文本的圆形不工作 React Native iOS

Question

我正在尝试在一些文本中为文本视图绘制圆形视图。

正在使用 Android，但是，iOS 无法正常工作。文本位于视图顶部。

      <Text style={styles.na}> NA </Text>

styles


 na: {
    width: 60,
    height: 60,
    borderRadius: 60 / 2,
    backgroundColor: 'orange',
    alignItems: 'center',
    textAlign: 'center',
    fontWeight: 'bold',
    color: 'white',
    fontSize: 15,
    textAlignVertical: 'center',
    marginRight: 10,
    overflow: 'hidden',
  },

有什么建议吗？

Answer 1

尝试alignSelf : center

alignSelf 具有与 alignItems 相同的选项和效果，但您可以将此属性应用于单个子项以更改其在其父项中的对齐方式，而不是影响容器内的子项。 alignSelf 覆盖父级使用 alignItems 设置的任何选项。

Reference

Answer 2

试试这个代码，对我有用

      <View style={{
        width: 60,
        height: 60,
        justifyContent: "center",
        borderRadius: 60 / 2,
        backgroundColor: 'orange',
      }}>
        <Text style={{
          alignSelf: 'center',
          fontWeight: 'bold',
          color: 'white',
          fontSize: 15,
        }}>NA</Text>
      </View>

带有中心文本的圆形不工作 React Native iOS

Circle shape with center text not working React Native iOS

javascript

css

great-circle

react-native