React应用样式调整：实现分数列对齐显示

核心思路是通过Flexbox将球队信息区（logo+名称）和分数区（分数+胜负图标）拆分为两个独立模块，让球队信息区占满左侧剩余空间，分数区固定在右侧，从而实现分数列的整齐对齐。

步骤1：修改组件结构 #

将每个game容器内的元素分为两个部分：球队信息容器和分数容器，确保分数区始终在右侧：

const ScoresScreen = () => {
  return (
    <ScrollView>
      <View style={styles.container}>
        {SCORES.map((score) => (
          <View key={uuid.v4()}>
            <View style={styles.game}>
              {/* 球队信息区：logo + 名称 */}
              <View style={styles.teamInfo}>
                <Image
                  source={{ uri: getTeamLogo(score.team1) }}
                  style={styles.logo}
                  resizeMode={'contain'}
                />
                <Text style={styles.team}>{score.team1}</Text>
              </View>
              {/* 分数区：分数 + 胜负图标 */}
              <View style={styles.scoreContainer}>
                <Text style={styles.score}>{score.team1Score}</Text>
                {score.team1Score > score.team2Score && (
                  <AntDesign name='checkcircle' size={18} color={Colors.midGreen} />
                )}
              </View>
            </View>
            <View style={styles.game}>
              <View style={styles.teamInfo}>
                <Image
                  source={{ uri: getTeamLogo(score.team2) }}
                  style={styles.logo}
                  resizeMode={'contain'}
                />
                <Text style={styles.team}>{score.team2}</Text>
              </View>
              <View style={styles.scoreContainer}>
                <Text style={styles.score}>{score.team2Score}</Text>
                {score.team1Score < score.team2Score && (
                  <AntDesign name='checkcircle' size={16} color={Colors.midGreen} />
                )}
              </View>
            </View>
            <Divider></Divider>
          </View>
        ))}
      </View>
    </ScrollView>
  );
};

步骤2：调整样式代码 #

通过Flexbox属性控制模块布局，去掉依赖margin的位置控制：

const styles = StyleSheet.create({
  container: {
    margin: 15,
  },
  game: {
    flexDirection: 'row',
    alignItems: 'center', // 垂直居中所有元素
    marginVertical: 8, // 增加上下间距，提升可读性
  },
  teamInfo: {
    flexDirection: 'row',
    alignItems: 'center',
    flex: 1, // 关键：占满左侧所有剩余空间，让分数区固定在右侧
  },
  team: {
    fontSize: 18,
    marginLeft: 10, // logo与名称的间距
  },
  logo: {
    width: Dimensions.get('window').width * 0.05,
    height: Dimensions.get('window').height * 0.05,
  },
  scoreContainer: {
    flexDirection: 'row',
    alignItems: 'center', // 分数与图标垂直居中对齐
  },
  score: {
    fontSize: 18,
  },
  check: {
    marginLeft: 8, // 分数与图标之间的间距
  },
});

关键修改说明 #

1. teamInfo添加flex:1：强制球队信息区占满左侧所有可用空间，无论名称长短，都不会挤压右侧的分数区位置。
2. 拆分分数与图标到scoreContainer：统一控制分数和图标的垂直对齐，避免用margin手动调整位置的不稳定问题。
3. 移除分数的marginLeft：不再依赖固定margin控制位置，完全由Flexbox布局实现对齐。

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