React原生纸质日期DatePickerInput定制

Question

我正在尝试从 React Native 纸张日期自定义 DatePickerInput 组件：https://web-ridge.github.io/react-native-paper-dates/docs/date-picker/input-date-picker

该组件创建一个可点击的，点击时打开一个模式。我想自定义模式：文本颜色、所选日期的背景... 默认主题的所有内容都是紫色的。

我尝试了很多道具，包括主题道具：

<DatePickerInput
                  theme={{colors:
                  {
                    primary:"#4E73DF",
                    accent:"#4E73DF",
                    onSurface:"#4E73DF",
                    onBackground:"#4E73DF",
                    onPrimary:"#4E73DF",
                    surface:"#4E73DF",
                    backdrop: 'rgba(0, 0, 255, 0.2)',
                    onSurfaceVariant:"#4E73DF"
                  }}}
                  activeUnderlineColor="#4E73DF"
                  iconColor="#4E73DF"
                  locale="en"
                  label="Date de début"

                  style={{ backgroundColor: "white" }}
                  value={inputDate}
                  onChange={(d) => setInputDate(d)}
                  inputMode="start"
                />

查看文档/问题，但我找不到适合我的东西。

Answer 1

modal 属性设置为自定义 CustomModal 组件，它允许您自定义模式的样式和内容。

import { Modal } from 'eact-native-paper';

const CustomModal = () => {
  return (
    <Modal
      contentContainerStyle={{ backgroundColor: 'white' }}
      style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}
    >
      {/* Your custom modal content here */}
    </Modal>
  );
};

<DatePickerInput
  modal={CustomModal}
  locale="en"
  label="Date"
  value={inputDate}
  onChange={(d) => setInputDate(d)}
  inputMode="start"
/>