React Native实现文本在按钮行上方及按钮行居底布局问题

不用自定义组件，直接利用原生flex布局就能解决问题，核心思路是调整外层容器的flex属性，让内容自然上下排列并固定在底部：

核心实现代码 #

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

export default function BottomButtonLayout() {
  return (
    <SafeAreaView style={styles.rootContainer}>
      {/* 按钮上方的文本 */}
      <Text style={styles.textLabel}>这是需要显示在按钮上方的内容</Text>
      
      {/* 横向排列的按钮行 */}
      <View style={styles.buttonContainer}>
        <TouchableOpacity style={styles.button}>
          <Text>确认</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.button}>
          <Text>取消</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.button}>
          <Text>更多</Text>
        </TouchableOpacity>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  rootContainer: {
    flex: 1,
    justifyContent: 'flex-end', // 将内部元素推至屏幕底部
    paddingHorizontal: 16,
    paddingBottom: 12, // 适配底部安全区，可按需调整
  },
  textLabel: {
    fontSize: 16,
    color: '#333',
    textAlign: 'center',
    marginBottom: 20, // 控制文本与按钮行的间距
  },
  buttonContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between', // 按钮均匀分布，也可换成space-around/center
    width: '100%',
  },
  button: {
    backgroundColor: '#f0f0f0',
    paddingVertical: 10,
    paddingHorizontal: 24,
    borderRadius: 6,
  },
});

关键布局说明 #

1. 外层容器：用SafeAreaView包裹并设置flex:1，确保占满整个屏幕；justifyContent: 'flex-end'会把所有子元素（文本+按钮行）推到屏幕底部，解决按钮居中的问题。
2. 上下排列：React Native中View默认flexDirection: 'column'，所以文本和按钮行自然会上下分布，不需要额外设置，之前的问题就是错误地给外层加了flexDirection: 'row'导致横向挤压。
3. 间距控制：通过文本的marginBottom调整文本与按钮行的距离，按钮行的paddingBottom适配不同设备的底部安全区域（比如iOS的底部黑条）。
4. 按钮行布局：给按钮容器设置flexDirection: 'row'即可实现横向排列，通过justifyContent属性控制按钮的分布方式（space-between/space-around/center）。

如果不需要适配安全区，直接用View替换SafeAreaView即可，逻辑完全一致。

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