能否让react-native-modal-datetime-picker实现iOS原生内联选择器样式？

可以实现内联显示且保留完整功能。react-native-modal-datetime-picker本身是基于@react-native-community/datetimepicker封装的弹窗组件，要实现类似iOS原生日历/时间选择器的内联样式，直接使用底层的@react-native-community/datetimepicker更直接，它原生支持内联模式。

具体实现步骤： #

1. 安装依赖（未安装的话）：

npm install @react-native-community/datetimepicker --save
# 或使用yarn
yarn add @react-native-community/datetimepicker

2. 编写内联选择器代码：

import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import DateTimePicker from '@react-native-community/datetimepicker';

const InlineDateTimePicker = () => {
  const [selectedDateTime, setSelectedDateTime] = useState(new Date());

  const handlePickerChange = (event, dateTime) => {
    if (dateTime) {
      setSelectedDateTime(dateTime);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.selectedText}>当前选择：{selectedDateTime.toLocaleString()}</Text>
      
      {/* 内联日期选择器 */}
      <DateTimePicker
        value={selectedDateTime}
        mode="date"
        display="inline"
        onChange={handlePickerChange}
        style={styles.picker}
      />

      {/* 内联时间选择器 */}
      <DateTimePicker
        value={selectedDateTime}
        mode="time"
        display="inline"
        onChange={handlePickerChange}
        style={styles.picker}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 20,
  },
  selectedText: {
    fontSize: 16,
    marginBottom: 15,
  },
  picker: {
    marginVertical: 10,
  },
});

export default InlineDateTimePicker;

关键说明： #

• display="inline"是iOS下开启内联模式的核心属性，Android平台会自动适配内联样式，无需额外配置。
• 若坚持使用react-native-modal-datetime-picker，由于它的封装逻辑围绕弹窗设计，没有直接暴露内联模式的配置项，因此更推荐使用底层库实现需求。
• 该方案完全保留日期/时间选择的所有核心功能，同时实现内联显示的原生样式效果。

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