React Native：如何跨Android和iOS居中星星符号

我正在开发一款适配Android和iOS的React Native简易应用，在View组件内有一个Text组件，通过条件字符串{item.isFavourite ? "\u2605": "\u2606"}渲染星星符号，希望用一套样式让Text在View中居中，但尝试多种属性后无法实现跨平台兼容。

当前JSX代码：

<View style={styles.menuFavouriteStar} >
  <Text
    style={styles.favouriteStar}
    onPress={() => {
      const newData = toggleFavourite(item, data);
      saveFavourites(newData.favouritesData);
      setData(newData);
      }}
  >{item.isFavourite ? "\u2605": "\u2606"}</Text>
</View>

样式代码：

menuFavouriteStar: {
    width: 40,
    height: 40,
    position: "absolute",
    top: "82%",
    right: "2%",
    backgroundColor: "white",
    borderRadius: 3
  },
  favouriteStar: {
    fontSize: 25,
    textAlign: "center",
    textAlignVertical: "center"
  }

核心解决思路：用父View的Flex布局实现跨平台居中 #

textAlignVertical是Android专属属性，iOS并不支持，这是导致跨平台兼容问题的核心原因。推荐直接通过父容器的Flex布局来实现居中，这种方式在两个平台都能稳定生效，无需分平台设置样式。

修改后的样式代码如下：

menuFavouriteStar: {
    width: 40,
    height: 40,
    position: "absolute",
    top: "82%",
    right: "2%",
    backgroundColor: "white",
    borderRadius: 3,
    // 添加flex布局属性实现居中
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  favouriteStar: {
    fontSize: 25,
    textAlign: "center" // 保留水平对齐，确保文字本身的居中表现
  }

额外说明： #

• 移除favouriteStar中的textAlignVertical，避免Android和iOS的表现差异；
• 父View设置flex:1配合justifyContent: 'center'（垂直居中）和alignItems: 'center'（水平居中），能确保内部Text组件在容器内完全居中；
• 这种方案不需要任何平台判断代码，完全跨平台兼容。

内容的提问来源于stack exchange，提问作者Korallion