React Native标题：长文本省略+短文本与右侧图标居中对齐

针对你提出的两个核心需求（长标题显示省略号、短标题与图标紧邻且整体居中），可以通过调整嵌套容器的flex属性来实现，具体修改如下：

调整后的代码 #

<AppView
  paddingHorizontal={5}
  useButton={dropDown}
  onPress={onTitlePress}
  flexDirection="row"
  justifyContent="center"
  flex={true}
  alignItems="center">
  {/* 新增标题与图标的包裹容器，控制两者紧邻关系 */}
  <AppView
    flexDirection="row"
    alignItems="center"
    flexShrink={1}
    maxWidth="100%">
    <AppText
      style={{ flex: 1, backgroundColor: 'red' }}
      textColor="text"
      textAlign='left' // 改为左对齐，确保短标题与图标紧邻
      isDarkTheme={isDarkTheme}
      numberOfLines={1}
      fontSize={AppFonts[17]}
      fontFamily="DMSansBold">
      {/* 可测试长标题："A Very Long Header Title That Needs Ellipsis" */}
      Little
    </AppText>
    {dropDown ? (
      <AppView flexDirection='row' style={{ paddingLeft: 2 }}> {/* 去掉固定width:30，避免多余间距 */}
        <FontAwesomeSvg
          iconType="SolidIcons"
          color={getAppColor('text', 1, isDarkTheme)}
          icon={'faAngleDown'}
          size={12}
        />
      </AppView>
    ) : null}
  </AppView>
</AppView>

关键调整说明 #

• 新增包裹容器：将标题和下拉图标放入同一个AppView，设置flexDirection="row"和alignItems="center"，确保两者始终紧邻；同时添加flexShrink={1}和maxWidth="100%"，保证这个容器不会超出父组件的宽度范围。
• 保留标题的flex属性：flex:1让标题在空间不足时自动收缩，配合numberOfLines={1}实现长标题省略号效果；短标题时，由于包裹容器仅占用内容宽度，flex:1不会让标题拉伸，因此能和图标紧密贴合。
• 移除图标容器的固定宽度：删除width:30，避免图标区域占用多余空间，确保短标题与图标无多余间距。
• 调整标题对齐方式：将textAlign='center'改为textAlign='left'，确保短标题与图标紧邻（若需要标题在自身区域居中，可保留center，但短标题会和图标之间有少量间距，可根据实际需求选择）。

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