我不确定为什么您的 DataTable 没有占据屏幕的整个宽度。我能想象它不这样做的唯一原因是它的宽度是否受到其父组件的限制。我开始为日历设计一些东西here：
import React, { useState, useEffect, useMemo, useCallback } from 'react';
import { View, StyleSheet, SafeAreaView } from 'react-native';
import Constants from 'expo-constants';
import { Text, DataTable,} from 'react-native-paper';
import dayjs from 'dayjs';
import TableHeader from './components/TableHeader';
import TableTitle from './components/TableTitle';
import SettingsModal from './components/SettingsModal';
import {
wrapArray,
getCalendarMonth,
WEEK_DAYS,
} from './helpers/utils';
const currentDay = dayjs();
const pickerItems = WEEK_DAYS.map((day, i) => {
return {
label: day,
value: i,
};
});
export default function App() {
// allow user to decide start of week
const [weekStart, setWeekStart] = useState(0);
const [month, setMonth] = useState(currentDay.get('month'));
const [year, setYear] = useState(currentDay.get('year'));
// when a month doesnt start at the weekStart it is necessary
// add days or blanks to put the arrays align days with the
// proper week day
const [hideExtraDays, setHideExtraDays] = useState(true);
const [days, setDays] = useState(
getCalendarMonth(month, year, weekStart, hideExtraDays)
);
const { weekDays, pickerList } = useMemo(() => {
return {
weekDays: wrapArray(WEEK_DAYS, weekStart),
pickerList: wrapArray(pickerItems, weekStart),
};
}, [weekStart]);
// incrementing/decrementing month is the same code
// accessing different dayjs functions
const incrementMonth = useCallback(
(isDecrementing) => {
const date = dayjs(`${year}-${month + 1}-01`);
const functionKey = isDecrementing ? 'subtract' : 'add';
const newDate = date[functionKey](1, 'month');
setMonth(newDate.get('month'));
setYear(newDate.get('year'));
},
[month, year]
);
// update days when these values change
useEffect(() => {
setDays(getCalendarMonth(month, year, weekStart, hideExtraDays));
}, [weekStart, month, year, hideExtraDays]);
return (
<SafeAreaView style={styles.container}>
{/*modal for calendar settings */}
<SettingsModal
{...{
pickerList,
weekStart,
setWeekStart,
hideExtraDays,
setHideExtraDays,
}}
/>
<View style={styles.calendarContainer}>
<DataTable style={{ flex: 1 }}>
<TableTitle
month={month}
year={year}
onLeftPress={() => incrementMonth(true)}
onRightPress={() => incrementMonth()}
// the month and year is a pressable that when press reveal
// dropdown flatlist picker on android this picker is unscrollable
onDateChange={(date) => {
setMonth(date.month);
setYear(date.year);
}}
/>
{/* days of the week */}
<TableHeader weekDays={weekDays} />
{days.map((week, weekIndex) => (
<DataTable.Row key={`week-${weekIndex}`}>
{week.map((day, dayIndex) => (
<DataTable.Cell key={`day-${dayIndex}`}>
{/* hideExtra days add null values when true */}
<Text>{day ? day.get('date') : null}</Text>
</DataTable.Cell>
))}
</DataTable.Row>
))}
</DataTable>
</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
calendarContainer: {
flex: 1,
},
});