如何在React Native中实现无弹窗的Spinner模式DatePickerAndroid并与其他View共存？

Hey there! The official DatePickerAndroid component is built exclusively as a modal dialog, so it can't be embedded directly into your page layout. But that doesn't mean you can't get the spinner-style date picker you want inline with other views—here are two reliable solutions:

1. Use a Third-Party Library (Quickest Solution) #

The react-native-date-picker library supports an inline spinner mode that fits perfectly into your existing layout. It's lightweight and handles the spinner UI out of the box.

Step 1: Install the library #

npm install react-native-date-picker
# Or for yarn:
yarn add react-native-date-picker

Step 2: Implement the inline spinner picker #

Here's how to use it directly in your page:

import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import DatePicker from 'react-native-date-picker';

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

  return (
    <View style={styles.container}>
      <Text>Select a date:</Text>
      {/* Inline spinner-style picker */}
      <DatePicker
        date={date}
        onDateChange={setDate}
        mode="date"
        // Enable inline mode (no modal)
        display="spinner"
        style={styles.picker}
      />
      {/* Other components in your page */}
      <Text style={styles.selectedDate}>Selected: {date.toLocaleDateString()}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    justifyContent: 'center',
  },
  picker: {
    width: '100%',
    height: 150,
    marginVertical: 20,
  },
  selectedDate: {
    fontSize: 16,
    marginTop: 10,
  },
});

export default InlineDatePicker;

This will render a spinner-style date picker directly in your view, no modal required. You can customize the styling to match your app's design.

2. Build a Custom Spinner Picker (Full Control) #

If you want full control over the UI and behavior, you can build your own using the @react-native-picker/picker library (the modern replacement for the deprecated Picker component).

Step 1: Install the picker library #

npm install @react-native-picker/picker
# Or for yarn:
yarn add @react-native-picker/picker

Step 2: Create the custom inline date picker #

This example creates separate spinners for year, month, and day:

import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Picker } from '@react-native-picker/picker';

const CustomInlineDatePicker = () => {
  const currentYear = new Date().getFullYear();
  const [selectedYear, setSelectedYear] = useState(currentYear);
  const [selectedMonth, setSelectedMonth] = useState(new Date().getMonth() + 1);
  const [selectedDay, setSelectedDay] = useState(new Date().getDate());

  // Generate year options (last 100 years to current)
  const yearOptions = [];
  for (let year = currentYear; year >= currentYear - 100; year--) {
    yearOptions.push(<Picker.Item key={year} label={year.toString()} value={year} />);
  }

  // Generate month options
  const monthOptions = [];
  for (let month = 1; month <= 12; month++) {
    monthOptions.push(<Picker.Item key={month} label={month.toString()} value={month} />);
  }

  // Generate day options (simplified—you can add logic to adjust for month/year)
  const dayOptions = [];
  for (let day = 1; day <= 31; day++) {
    dayOptions.push(<Picker.Item key={day} label={day.toString()} value={day} />);
  }

  return (
    <View style={styles.container}>
      <Text>Pick your date:</Text>
      <View style={styles.pickerRow}>
        <Picker
          selectedValue={selectedYear}
          onValueChange={(itemValue) => setSelectedYear(itemValue)}
          style={styles.picker}
        >
          {yearOptions}
        </Picker>
        <Picker
          selectedValue={selectedMonth}
          onValueChange={(itemValue) => setSelectedMonth(itemValue)}
          style={styles.picker}
        >
          {monthOptions}
        </Picker>
        <Picker
          selectedValue={selectedDay}
          onValueChange={(itemValue) => setSelectedDay(itemValue)}
          style={styles.picker}
        >
          {dayOptions}
        </Picker>
      </View>
      <Text style={styles.selectedDate}>
        Selected: {selectedMonth}/{selectedDay}/{selectedYear}
      </Text>
      {/* Add your other page components here */}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    justifyContent: 'center',
  },
  pickerRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginVertical: 20,
  },
  picker: {
    width: '30%',
    height: 150,
  },
  selectedDate: {
    fontSize: 16,
    marginTop: 10,
    textAlign: 'center',
  },
});

export default CustomInlineDatePicker;

Note: For a complete solution, you'll want to add logic to adjust the number of days based on the selected month and year (e.g., February has 28/29 days, April has 30, etc.).

Why the Official DatePickerAndroid Won't Work #

The native Android DatePicker component has two modes: dialog and spinner, but the React Native DatePickerAndroid wrapper only exposes the dialog mode. There's no built-in way to render it inline, so the above solutions are your best bets.

内容的提问来源于stack exchange，提问作者TechSatya