React Native通知页面：实现一行两文本居左一文本居右布局

开发React Native通知页面时，需要实现一行内两个文本（用户名、分类）紧邻显示，第三个文本（时间）靠右对齐的布局。但React Native没有float属性，直接用position设置无法达到预期效果，以下是可行的实现方案：

原代码问题分析 #

当前notificationHead容器仅设置了flexDirection: row，未利用Flex布局的空间分配特性，导致时间文本无法自动靠右；同时mainContent未占满头像外的剩余宽度，限制了头部布局的可用空间。

解决方案：利用Flex布局的marginLeft: auto特性 #

核心思路：

• 将用户名和分类放在同一个子容器中，保证二者始终紧邻显示
• 让头部容器占满可用宽度，通过marginLeft: auto将时间文本推至最右侧
• 调整父容器的flex属性，确保布局有足够宽度空间

修改后的代码 #

核心布局部分修改

<View style={styles.mainContent}>
  <View style={styles.notificationHead}>
    {/* 将用户名和分类放在同一个子View中 */}
    <View style={styles.leftSection}>
      <Text style={styles.userName}>{item.username}</Text>
      <Text style={styles.categoryText}>{item.category}</Text>
    </View>
    <Text style={styles.timeText}>{item.time}</Text>
  </View>
  <View>
    <Text style={styles.notification}>{item.notification}</Text>
  </View>
</View>

样式修改

const styles = StyleSheet.create({
  // 保留原有其他样式，仅修改以下部分
  mainContent: {
    flex: 1, // 新增：占满头像之外的剩余宽度
  },
  notificationHead: {
    flexDirection: "row",
    alignItems: "baseline",
    flex: 1, // 新增：让头部容器占满mainContent的宽度
  },
  leftSection: {
    flexDirection: "row", // 让用户名和分类横向排列
  },
  timeText: {
    // 移除position相关设置，替换为marginLeft: auto
    fontFamily: "Roboto",
    fontSize: 11,
    fontWeight: "400",
    color: "#707070",
    opacity: 0.7,
    marginLeft: "auto", // 关键：自动填充左侧剩余空间，将文本推至右侧
  },
  // 保留原有其他样式
});

原理说明 #

• flex:1 让mainContent和notificationHead分别占满父容器的可用空间，确保布局有足够宽度
• marginLeft: auto 是Flex布局特性，会让元素自动填充左侧剩余空间，实现靠右对齐
• 将用户名和分类放在同一个子容器中，保证二者始终紧邻，不会被时间文本挤压

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