React Native Expo父View设flexDirection后子View justifyContent失效如何解决

布局失效的核心原因是横向父容器下的子容器宽度不足：当最外层View设置flexDirection: row后，第一个带下边框的子View默认宽度仅适配内部内容的总宽度，没有剩余横向空间供justifyContent: space-between分配空白区域，因此该属性不会生效。

修改逻辑如下：

• 最外层父View保留flexDirection: 'row'，新增alignItems: 'center'保证文本行和图标垂直对齐
• 给第一个带下边框的子View新增flex: 1属性，让它自动填充最外层除图标宽度外的所有剩余横向空间，为内部的space-between规则提供布局空间
• 可按需调整图标容器的间距和对齐属性，匹配视觉要求

修改后的完整代码：

<View style={{flexDirection: "row", alignItems: 'center'}}>
  <View style={{ 
    flex: 1,
    borderBottomColor: 'black',
    borderBottomWidth: 3,
    paddingVertical: 8
  }}>
    <View style={{flexDirection:'row',justifyContent:'space-between'}}>
      <Text style={{ color: "#6B35E2"}}>Name</Text>
      <Text style={{ fontWeight: 'bold',color: "#6B35E2"}}>Nico</Text>
    </View>
  </View>
  <View style={{marginLeft: 12}}>
    <Icon
      name="fingerprint"
      iconStyle={styles.iconRight}
    />
  </View>
</View>

修改后可实现预期效果：左侧Name和Nico会按space-between规则左右分布，下边框仅覆盖左侧文本区域，不会延伸到右侧图标下方，图标也会对齐在Nico的右侧。

内容的提问来源于stack exchange，提问作者NICOLÁS ANTONIO PINO LEVA