css React Native Avatar不会在文本上居中对齐

nr9pn0ug 于 4个月前发布在 React

关注(0)|答案(1)|浏览(67)

我有一个头像和一个TouchableOpacity内的文本字段。我需要的头像和文本都是在TouchableOpacity内的中心，我需要在一行头像和下面的文本每次即使在屏幕上调整大小。
下面的代码将头像和文本并排放置，这是不正确的：

<View>
  <TouchableOpacity>
    <View
      style={{
        flex: 1,
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <Avatar size={22} rounded source={{ uri: item1.avatarUrl2 }} />
      <Text
        style={{
          color: COLORS.purple_dark,
          fontSize: 12,
          textAlign: "center",
        }}
      >
        **The title of my Avatar will go Here**
      </Text>
    </View>
  </TouchableOpacity>
</View>

字符串

css

来源：https://stackoverflow.com/questions/77761981/react-native-avatar-wont-center-align-over-text

1条答案

按热度按时间

velaa5lx1#

如果你想让Avatar和它下面的文本保持在一行中，那么你需要注解掉代码中的flexDirection: "row"，因为React中默认的组件是放在列中的。或者你可以传递flexDirection: "column"。

<View>
  <TouchableOpacity>
    <View
      style={{
        flex: 1,
        flexDirection: "row", // comment it out or pass "column"
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <Avatar size={22} rounded source={{ uri: item1.avatarUrl2 }} />
      <Text
        style={{
          color: COLORS.purple_dark,
          fontSize: 12,
          textAlign: "center",
        }}
      >
        **The title of my Avatar will go Here**
      </Text>
    </View>
  </TouchableOpacity>
</View>

字符串
这将使组件保持垂直对齐。

的数据