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

【问题标题】：react-native-paper-dates date picker not displayingreact-native-paper-dates 日期选择器不显示
【发布时间】：2021-10-04 23:10:31
【问题描述】：

我正在尝试在我的网站上包含一个日期选择器。除非显示宽度小于 650. Screen width 1920 - not showing，否则日期选择器不会出现在屏幕上。当它确实出现时，它看起来非常挤压，数字相互重叠。它出现在屏幕的最左侧。我认为弹性盒子的开始？ Screen width 650 - showing. 我对 React Native 或 CSS 没有信心，所以我一直在改变一切，看看它能做什么。我尝试更改 DatePickerModal 的 padding、margin、width、minWidth 以及更改包含 DatePicker 的 View 的 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，但它并没有改变任何东西。我正在使用 Expo 在 Chrome 上运行该网站。它是用 React Native 构建的。

【问题讨论】：

标签： css react-native

【解决方案1】：

这是一个很好的问题；我在react-native-paper-dates 上遇到了同样的问题。

我无法解决您上面的问题，但我怀疑这是因为 DatePickerModal 的 css 没有被导入。

我已经设法用react-datepicker 解决了看似类似的问题（同样的问题？）。

没有 css

这是 react-datepicker 的导入，不带 css：

import DatePicker from 'react-datepicker';

以及由此产生的incorrect layout is shown here;您可以看到与上述问题类似的布局 - 它位于垂直线上、重叠等。

使用 css

这是 react-datepicker 的导入，带有 css：

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

以及由此产生的correct layout;你可以看到布局是正确的（或者至少非常接近。

结论

我怀疑 DatePickerModal 的 css 不是从 react-native-paper-dates 导入的。

【讨论】：