React Native中如何避免两个Text组件出现重叠问题

重叠核心原因：两个组件均设置了固定left偏移值，经计算位置范围完全重合：

• ChildTextTitle 横向占用范围：10px ~ 10px+144px = 154px
• ChildText 横向占用范围：44px ~ 44px+83px = 127px
  另外 ChildText 的样式中left:44后缺少逗号，存在语法隐患。

可通过以下4种方式解决：

• 方案1：改用 Flex 布局（最推荐）
  给父容器设置 Flex 横向排版，无需手动计算偏移量，可适配所有屏幕宽度：
  父 View 样式：

  style={{
    flexDirection: 'row',
    justifyContent: 'space-between', // 两端对齐
    alignItems: 'center', // 垂直居中
    paddingHorizontal: 10 // 统一设置左右内边距，无需给子组件加left属性
  }}
  

  两个子组件删除left和固定宽度（按需可加 margin 调整间距）即可。
• 方案2：调整固定定位参数
  如果必须保留left定位逻辑，调整 ChildText 的left值大于等于 ChildTextTitle 的右边界（≥154px）即可避免重叠，同时补全样式中缺失的逗号：

  <ChildText
    style={{
      textAlign: "right",
      width: 83,
      left: 160, // 调整为160，避开前一个组件的占用范围
      justifyContent: "flex-end",
    }}
  />
  

• 方案3：相对父容器两端定位
  父容器设置position: 'relative'，两个子组件分别用left和right定位，无需计算宽度即可避免重叠：

  // 父View样式
  style={{ position: 'relative', height: 40 }}
  // ChildTextTitle样式
  style={{ width: 144, left: 10, textAlign: "right", position: 'absolute' }}
  // ChildText样式
  style={{ width: 83, right: 10, textAlign: "right", position: 'absolute', justifyContent: "flex-end" }}
  

• 方案4：自适应宽度分配
  删除子组件固定宽度，用flex属性按比例分配父容器宽度：

  <ChildTextTitle
    style={{
      flex: 3, // 占父容器3/4宽度
      marginLeft: 10,
      textAlign: "right",
    }}
  />
  <ChildText
    style={{
      flex: 1, // 占父容器1/4宽度
      marginLeft: 10,
      textAlign: "right",
      justifyContent: "flex-end",
    }}
  />
  

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