如何让react-native-paper的DataTable单元格占满行可用空间？

要让日历表格占满全部可用宽度，只需做两个关键调整：

• 给外层<DataTable>设置100%宽度，确保它铺满父容器
• 给每个<DataTable.Cell>添加flex: 1样式，让7个单元格均分整行宽度，同时可加上居中对齐优化视觉效果

修改后的代码如下：

<DataTable style={{ width: '100%' }}>
    <DataTable.Row>
        {weeks.map((day, index) => (
            <DataTable.Cell key={`week-day-${index}`} style={{ flex: 1, textAlign: 'center' }}>
                <Text>
                    {dayjs(day).format("dd")}
                </Text>
            </DataTable.Cell>
        ))}
    </DataTable.Row>
    {weeks.map((week, weekIndex) => (
        <DataTable.Row key={`week-${weekIndex}`}>
            {week.map((day, dayIndex) => (
                <DataTable.Cell
                    key={`day-${dayIndex}`}
                    style={{ flex: 1, textAlign: 'center' }}
                >
                    <Text>{day.getDate()}</Text>
                </DataTable.Cell>
            ))}
        </DataTable.Row>
    ))}
</DataTable>

原理说明 #

• style={{ width: '100%' }} 强制DataTable容器铺满父组件的可用宽度
• flex: 1 让每个Cell在Row容器中平分所有可用空间，7个Cell刚好填满整行，适配日历的7列布局
• textAlign: 'center' 是可选优化，让日期和星期文字居中显示，更符合日历的视觉习惯

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