iOS 自带日期选择器 | React-Native

React-Native 是一个流行的跨平台应用开发框架，它允许开发者使用 JavaScript 和 React 来构建 iOS 和 Android 应用。在 React-Native 中，我们可以使用 iOS 自带的日期选择器来让用户选择日期。本文将介绍如何在 React-Native 中使用 iOS 自带的日期选择器，包括如何设置日期选择器的样式和如何获取用户选择的日期。

设置日期选择器的样式

在 React-Native 中，我们可以使用 DatePickerIOS 组件来使用 iOS 自带的日期选择器。要使用 DatePickerIOS，我们需要引入它：

import React, { useState } from 'react';
import { DatePickerIOS } from 'react-native';

然后，我们可以在组件中使用 DatePickerIOS，并设置它的样式和初始日期：

const MyDatePicker = () => {
  const [date, setDate] = useState(new Date());

  return (
    <DatePickerIOS
      date={date}
      onDateChange={setDate}
      mode="date"
      style={{ marginTop: 10 }}
    />
  );
};

在上面的代码中，我们使用 useState 钩子来定义一个名为 date 的状态变量，并将其初始值设置为当前日期。然后，我们在 DatePickerIOS 中使用 date 变量来设置初始日期，并在用户选择日期时更新 date 变量的值。我们还设置了 mode 属性为 "date"，以便只显示日期选择器。最后，我们使用 style 属性来设置日期选择器的样式。

获取用户选择的日期

在 React-Native 中，我们可以使用 onDateChange 属性来获取用户选择的日期。onDateChange 是一个回调函数，它会在用户选择日期时被调用。我们可以将这个回调函数传递给 DatePickerIOS，并在函数中获取用户选择的日期：

const MyDatePicker = () => {
  const [date, setDate] = useState(new Date());

  const handleDateChange = (newDate) => {
    setDate(newDate);
    console.log(newDate);
  };

  return (
    <DatePickerIOS
      date={date}
      onDateChange={handleDateChange}
      mode="date"
      style={{ marginTop: 10 }}
    />
  );
};

在上面的代码中，我们定义了一个名为 handleDateChange 的回调函数，它会在用户选择日期时被调用。在函数中，我们首先使用 setDate 函数来更新 date 变量的值，然后使用 console.log 函数将用户选择的日期打印到控制台中。

示例代码

下面是一个完整的示例代码，它演示了如何在 React-Native 中使用 iOS 自带的日期选择器：

import React, { useState } from 'react';
import { View, Text, DatePickerIOS, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

const MyDatePicker = () => {
  const [date, setDate] = useState(new Date());

  const handleDateChange = (newDate) => {
    setDate(newDate);
    console.log(newDate);
  };

  return (
    <DatePickerIOS
      date={date}
      onDateChange={handleDateChange}
      mode="date"
      style={{ marginTop: 10 }}
    />
  );
};

const App = () => {
  return (
    <View style={styles.container}>
      <Text>Select a date:</Text>
      <MyDatePicker />
    </View>
  );
};

export default App;

在上面的代码中，我们定义了一个名为 MyDatePicker 的组件，它包含了一个 DatePickerIOS 组件。我们还定义了一个名为 App 的组件，它包含了一个 MyDatePicker 组件和一个文本标签。最后，我们导出了 App 组件，以便在应用中使用它。

总结

本文介绍了如何在 React-Native 中使用 iOS 自带的日期选择器。我们学习了如何设置日期选择器的样式和如何获取用户选择的日期。希望本文能够对你有所帮助，让你更好地使用 React-Native 开发 iOS 应用。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65c04b48add4f0e0ffa17e5c