React Native中头像无法在文本上方居中对齐的问题求助

你的问题出在内层View的flexDirection设置上——当前用了"row"，所以头像和文本会横向并排显示。只需要把这个属性改成"column"，就能让元素纵向排列，同时保留居中的布局逻辑：

修改后的代码如下：

<View>
  <TouchableOpacity>
    <View
      style={{
        flex: 1,
        flexDirection: "column", // 关键修改：从row改为column
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <Avatar size={22} rounded source={{ uri: item1.avatarUrl2 }} />
      <Text
        style={{
          color: COLORS.purple_dark,
          fontSize: 12,
          textAlign: "center",
          marginTop: 6, // 可选：给文本加顶部间距，让布局更美观
        }}
      >
        The title of my Avatar will go Here
      </Text>
    </View>
  </TouchableOpacity>
</View>

关键修改说明： #

• flexDirection: "column"：将内层View的布局方向从横向改为纵向，这样头像会自动在上，文本在下
• 保留justifyContent: "center"和alignItems: "center"：确保整个内容在TouchableOpacity内水平和垂直都居中
• 可选的marginTop: 6：给文本添加上边距，避免和头像贴得太近，提升视觉体验

这样调整后，无论屏幕尺寸如何变化，头像都会始终在文本上方，且整体保持居中显示。

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