React Native Paper Dates 使用教程

最新推荐文章于 2024-09-09 09:08:30 发布

缪阔孝Ruler

最新推荐文章于 2024-09-09 09:08:30 发布

阅读量571

点赞数 24

本文链接：https://blog.csdn.net/gitblog_00125/article/details/141589141

版权

React Native Paper Dates 使用教程

react-native-paper-datesSmooth and fast cross platform Material Design date and time picker for React Native Paper项目地址:https://gitcode.com/gh_mirrors/re/react-native-paper-dates

项目介绍

react-native-paper-dates 是一个平滑且快速的跨平台 Material Design 日期和时间选择器，适用于 React Native Paper。它经过 Android、iOS 和 Web 平台的测试，使用原生的 Date 和 Intl API，具有小巧的包体积、简单的 API 和类型安全特性。此外，它支持无限滚动和出色的 React Native Web 支持。

项目快速启动

安装依赖

首先，确保你已经安装了 react-native-paper 和 react-native-paper-dates：

npm install react-native-paper react-native-paper-dates

或者使用 Yarn：

yarn add react-native-paper react-native-paper-dates

基本使用

在你的 React Native 项目中，引入并使用 DatePicker：

import React, { useState } from 'react';
import { Button } from 'react-native-paper';
import { DatePickerModal } from 'react-native-paper-dates';

const App = () => {
  const [date, setDate] = useState(undefined);
  const [open, setOpen] = useState(false);

  const onDismissSingle = () => {
    setOpen(false);
  };

  const onConfirmSingle = (params) => {
    setOpen(false);
    setDate(params.date);
  };

  return (
    <>
      <Button onPress={() => setOpen(true)}>
        Pick date
      </Button>
      <DatePickerModal
        mode="single"
        visible={open}
        onDismiss={onDismissSingle}
        date={date}
        onConfirm={onConfirmSingle}
      />
    </>
  );
};

export default App;