React Native头部元素布局：实现右侧同行播放按钮

我来帮你搞定这个SectionHeader的布局问题！要让标题和播放按钮在同一行左右分布，核心是利用React Native的Flexbox布局来实现——这是RN里布局的核心工具，非常好用。

修改后的完整组件代码 #

import React, { Component } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';

class SectionHeader extends Component {
  render() {
    return (
      <View style={styles.header}>
        {/* 左侧标题 */}
        <Text style={styles.headerText}>{this.props.section.title}</Text>
        {/* 右侧播放按钮 */}
        <TouchableOpacity 
          style={styles.playButton} 
          onPress={() => {
            // 这里可以添加播放按钮的点击逻辑
            console.log(`开始播放 ${this.props.section.title} 内容`);
          }}
        >
          <Text style={styles.playButtonText}>Play</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  header: {
    flexDirection: 'row', // 把纵向布局改为横向，让子元素在同一行排列
    justifyContent: 'space-between', // 让标题和按钮分别靠左右两端，中间自动填充空白
    alignItems: 'center', // 让两个元素在垂直方向上居中对齐，避免高低错位
    paddingHorizontal: 16, // 左右内边距，避免内容紧贴屏幕边缘
    paddingVertical: 12, // 上下内边距，增加头部的高度，提升视觉舒适度
    backgroundColor: '#f5f5f5', // 浅灰色背景，区分头部和下方内容
  },
  headerText: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
  },
  playButton: {
    paddingHorizontal: 12,
    paddingVertical: 6,
    backgroundColor: '#007AFF', // 用苹果蓝作为按钮底色，符合原生风格
    borderRadius: 4, // 圆角处理，让按钮看起来更柔和
  },
  playButtonText: {
    color: '#fff',
    fontSize: 14,
    fontWeight: '500',
  },
});

export default SectionHeader;

关键布局逻辑解释 #

1. flexDirection: 'row'：这是核心，默认View的布局是纵向（column），改成横向后，标题和按钮就会在同一行排列。
2. justifyContent: 'space-between'：这个属性会让容器内的子元素分别靠向左右两端，中间的空白区域自动填充，完美实现“左标题右按钮”的效果。
3. alignItems: 'center'：保证标题和按钮在垂直方向上居中对齐，不会出现一个高一个低的情况。

灵活替代方案 #

如果你希望按钮始终靠右，哪怕标题很长（比如标题占满左侧大部分空间），可以把justifyContent: 'space-between'去掉，给播放按钮添加marginLeft: 'auto'：

// 修改header样式
header: {
  flexDirection: 'row',
  alignItems: 'center',
  paddingHorizontal: 16,
  paddingVertical: 12,
  backgroundColor: '#f5f5f5',
},
// 修改playButton样式
playButton: {
  marginLeft: 'auto', // 自动填充左侧所有剩余空间，强制按钮靠右
  paddingHorizontal: 12,
  paddingVertical: 6,
  backgroundColor: '#007AFF',
  borderRadius: 4,
},

这种方式在标题长度不确定时更稳定，不会出现标题和按钮挤在一起的情况。

你可以根据自己的UI设计需求，调整颜色、字体大小、内边距、圆角这些参数，让组件完全适配你的App风格。

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