React Native中Row布局下如何让第二个View填充底部剩余空间？

当然有可行的方案啦！在React Native的row方向布局里实现第二个View占据剩余空间，完全可以靠Flexbox的核心属性轻松实现，下面给你两种最实用的实现方式：

方法一：第一个View固定宽度，第二个View设flex:1 #

这是最常见的场景，比如第一个View是固定尺寸的侧边栏，第二个View要填满剩下的区域。代码示例如下：

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

const RowLayoutDemo = () => {
  return (
    <View style={styles.container}>
      {/* 第一个View：固定宽度 */}
      <View style={styles.leftView} />
      {/* 第二个View：填充剩余空间 */}
      <View style={styles.rightView} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row', // 设置为横向布局
    height: 120, // 给父容器一个固定高度（也可以用flex:1让它撑满父级）
    borderWidth: 1,
    borderColor: '#ddd',
    margin: 20,
  },
  leftView: {
    width: 100, // 固定宽度
    backgroundColor: '#8BC34A',
  },
  rightView: {
    flex: 1, // 关键属性：占据父容器剩余的所有空间
    backgroundColor: '#2196F3',
  },
});

export default RowLayoutDemo;

原理说明 #

flex:1的作用是让当前组件在父容器的剩余可用空间中分配权重。这里只有右侧View设置了flex:1，所以它会独占第一个View之外的全部剩余空间。

方法二：第一个View自适应内容宽度，第二个View设flex:1 #

如果第一个View的宽度是由内部内容决定的（比如文本、图标），不用给它设置固定宽度，直接让它自适应，第二个View依然用flex:1即可：

// 修改leftView的样式，去掉固定width，由内容撑宽
leftView: {
  paddingHorizontal: 25,
  paddingVertical: 15,
  backgroundColor: '#8BC34A',
  justifyContent: 'center',
  alignItems: 'center',
},
// rightView样式保持不变
rightView: {
  flex: 1,
  backgroundColor: '#2196F3',
},

注意事项 #

• 确保父容器有明确的尺寸约束：要么设置固定height/width，要么给父容器加flex:1让它撑满上级容器，否则布局可能会塌陷。
• 如果有多个子View需要分配剩余空间，可以给它们设置不同的flex值（比如flex:2和flex:1），组件会按照比例分配剩余空间。

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