在 React Native Elements 的 ListItem 顶部对齐 3 个点图标

Question

在屏幕截图中显示了如何将 3 点图标放置在右上角，现在它位于中心。

使用https://react-native-training.github.io/react-native-elements/docs/listitem.html

示例代码

<ListItem
  containerStyle={styles.containerStyle}
  title={this.getTitleView(data)}
  subtitle={this.getAddressView(data)}
  leftElement={this.getAvatarView(data)}
  rightElement={<Icon type="material" color="#C8C8C8" name="more-vert" />}
  />

基本上我希望 rightElement 放在 top 而不是 center

Answer 1

我让图标向上移动，但我无法让它向右移动更多。

要真正让 <Icon> 与顶角对齐，请向其添加 containerStyle 属性并使用 alignSelf: 'flex-start' 样式，就像这样：

rightElement={<Icon containerStyle={{ alignSelf: 'flex-start' }} type="material" color="#C8C8C8" name="more-vert" />

它应该看起来像这张图片。

希望对您有所帮助。

在 React Native Elements 的 ListItem 顶部对齐 3 个点图标

Align 3 dots icon on Top in ListItem in React Native Elements

reactjs

react-native

react-native-elements