javascript - 带有中心文本的圆形形状不起作用React Native iOS

Question

我正在尝试在某些文本内为 textview 绘制圆形视图。

它适用于 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

试试这个代码，对我有用

      <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>

Answer 2

尝试alignSelf : center

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

参考