react-native-paper-dates日期选择器不显示

Question

我试图在我的网站上包含一个日期选择器。除非显示宽度小于650，否则日期选择器不会出现在屏幕上。屏幕宽度1920 -不显示。当它看起来非常压扁时，这些数字是相互重叠的。它出现在屏幕的最左边。我想是挠性盒子的开始?屏幕宽度650 -显示。我不是自信的反应本地或CSS所以我刚刚改变一切看它做些什么。我已经尝试改变填充，边距，宽度，minWidth的DatePickerModal以及改变包含DatePicker的视图的CSS。

进口:

import { DatePickerModal } from "react-native-paper-dates";

返回包含日期选择器的值

return (
<View style={styles.test}>
<PaperProvider theme={theme}>
<DatePickerModal
// locale={'en'} optional, default: automatic
mode="single"
visible={true}
onDismiss={onDismissSingle}
date={date}
onConfirm={onConfirmSingle}
// style={styles.defaultPicker}
// height={500}
// width={500}
// minWidth={1000}
// padding={100}
// margin={100}
// alignSelf={"center"}
/>
</PaperProvider>
<Button
color="#ffba00"
title="cancel"
onPress={() => {
console.log("open");
setshowAll(true);
setShow(false);
setOpen(false);
}}
/>
</View>
);

显示我已经尝试过的视图的样式。

test: {
minWidth: 1000,
alignContent: "center",
alignItems: "center",
alignSelf: "center",
flexWrap: "wrap",
width: 600,
position: "absolute",
left: 50,
top: 50,
},

我也试过删除PaperProvider，它没有改变任何东西。我使用世博会运行Chrome上的网站。它使用React Native构建。

Answer 1

这是个好问题;我对react-native-paper-dates也有同样的问题。

我还没有能够解决你的问题上面，但我怀疑这是因为css的DatePickerModal没有被导入。

我已经设法解决了react-datepicker的类似问题(相同的问题?)。

没有css

这是react-datepicker没有css的导入:

import DatePicker from 'react-datepicker';

结果错误的布局显示在这里;你可以看到与上面的问题相似的布局——在一条垂直线上，重叠，等等。

用css

以下是react-datepicker的css导入:

import DatePicker from 'react-datepicker';
import "react-datepicker/dist/react-datepicker.css";

和结果正确的布局;你可以看到布局是正确的(或者至少非常接近)。

结论

我怀疑DatePickerModal的css没有从react-native-paper-dates导入。