React Native Elements Avatar图标无法右对齐问题求助

你已经把Avatar的外层容器定位到右侧了，但内部图标还是靠左，这是因为RNE的Avatar组件里，图标是放在独立的内部容器中的，默认对齐方式不会继承外层容器的设置，你可以试试下面几种方法：

• 方法一：直接给图标添加样式
  在你定义的icon对象里加上style属性，强制图标靠右：

  <Avatar
    small
    rounded
    icon={{ 
      name: "user", 
      type: "font-awesome",
      style: { alignSelf: 'flex-end' } // 让图标自身靠右对齐
    }}
    onPress={() => console.log("Works!")}
    activeOpacity={0.7}
    containerStyle={{ marginRight: 20, marginTop: 20, alignSelf: "flex-end" }}
  />
  

  如果这个效果不够明显，还可以试试给图标加marginLeft: 'auto'，利用flex布局的特性把图标挤到右侧：

  icon={{ 
    name: "user", 
    type: "font-awesome",
    style: { marginLeft: 'auto' }
  }}
  

• 方法二：调整Avatar的内部内容容器样式
  RNE的Avatar提供了contentContainerStyle属性，用来控制内部内容（图标/图片）的容器样式，你可以通过这个属性设置整体对齐：

  <Avatar
    small
    rounded
    icon={{ name: "user", type: "font-awesome" }}
    onPress={() => console.log("Works!")}
    activeOpacity={0.7}
    containerStyle={{ marginRight: 20, marginTop: 20, alignSelf: "flex-end" }}
    contentContainerStyle={{ justifyContent: 'flex-end', alignItems: 'flex-end' }} // 让内部容器的内容靠右
  />
  

这两种方法都能解决你的问题，不同版本的RNE可能在细节上略有差异，你可以都试试，选最适合你的就行。

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