React Native UI DatePicker 使用教程-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00792/article/details/146994120

React Native UI DatePicker 使用教程

react-native-ui-datepicker Customizable React Native 📅 DatePicker component for Android, iOS, and Web. It includes single, range and multiple modes and supports different locales. 项目地址: https://gitcode.com/gh_mirrors/re/react-native-ui-datepicker

1. 项目介绍

React Native UI DatePicker 是一个功能丰富的日期选择器组件，适用于 Android、iOS 和网页端。该组件支持多种选择模式，包括单选、范围选择和多选。它不仅样式可定制，还支持多种语言本地化，包括波斯历（Jalali），并能处理不同的时区。此外，React Native UI DatePicker 完全兼容 NativeWind，是一个快速且轻量级的组件。

2. 项目快速启动

首先，确保你已经安装了 Node.js 和 React Native 开发环境。

安装

通过 npm 或 yarn 安装 React Native UI DatePicker：

npm install react-native-ui-datepicker
# 或者
yarn add react-native-ui-datepicker

基本用法

在你的 React Native 项目中，导入 DateTimePicker 组件和一个状态管理库：

import React, { useState } from 'react';
import DateTimePicker, { DateType, useDefaultStyles } from 'react-native-ui-datepicker';
import { View } from 'react-native';

export default function App() {
  const defaultStyles = useDefaultStyles();
  const [selected, setSelected] = useState<DateType>(new Date());

  return (
    <View style={{ flex: 1, justifyContent: 'center' }}>
      <DateTimePicker
        mode="single"
        date={selected}
        onChange={({ date }) => setSelected(date)}
        style={defaultStyles}
      />
    </View>
  );
}

确保你已经设置了状态 selected 来存储选择的日期，并且传递给 onChange 回调函数以更新这个状态。

3. 应用案例和最佳实践

以下是一个简单的日期选择器示例，它只允许用户选择今天或之后的日期：

import React, { useState } from 'react';
import DateTimePicker, { DateType } from 'react-native-ui-datepicker';
import { View } from 'react-native';

export default function App() {
  const [selected, setSelected] = useState<DateType>(new Date());

  const minDate = new Date(); // 用户不能选择今天之前的日期

  return (
    <View style={{ flex: 1, justifyContent: 'center' }}>
      <DateTimePicker
        mode="single"
        date={selected}
        onChange={({ date }) => setSelected(date)}
        minDate={minDate}
      />
    </View>
  );
}

在这个例子中，我们设置了 minDate 属性来确保用户不能选择今天之前的日期。