React Native DateTimePicker样式设置及弹窗背景异常问题咨询

1. 去除弹窗浅灰色背景 #

你在style中设置的backgroundColor仅作用于嵌入式展示的选择器组件，弹窗模式下的弹窗背景需要单独配置：

• 安卓端直接配置组件属性：给DateTimePicker新增dialogBackgroundColor="white"属性，即可直接覆盖默认的浅灰色弹窗背景。
• 多端通用灵活方案：自行维护选择器的显示状态，将DateTimePicker嵌入自定义的Modal组件中，可完全自定义Modal的背景色、圆角、阴影等所有样式，不受组件默认样式限制。

2. 输入框触发时默认打开弹窗 #

新增一个控制选择器显隐的状态，初始值设为true即可实现默认打开效果，完整示例代码如下：

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

const BLACK = '#000';
const Picker = () => {
    const [currentDate, setCurrentDate] = useState(new Date());
    // 新增显隐状态，初始为true实现默认打开
    const [showPicker, setShowPicker] = useState(true);

    const handleDateChange = (event, selectedDate) => {
        setShowPicker(false);
        if (selectedDate) {
            setCurrentDate(selectedDate);
            // 可在这里把日期赋值给输入框展示
        }
    };

    return (
        <View>
            <TextInput
                style={styles.input}
                placeholder="选择日期"
                value={currentDate.toLocaleDateString()}
                onPressIn={() => setShowPicker(true)}
                editable={false}
            />
            {showPicker && (
                <DateTimePicker
                  testID={'dateTimePicker'}
                  value={currentDate}
                  mode={'date'}
                  display={'default'}
                  style={styles.dateTimePicker}
                  textColor={BLACK}
                  // 安卓端弹窗背景设置
                  dialogBackgroundColor="white"
                  onChange={handleDateChange}
                />
            )}
        </View>
    );
};

const styles = StyleSheet.create({
    input: {
        backgroundColor: 'white',
        borderRadius: 5,
        borderColor: '#C5C5C5',
        borderWidth: 1,
        marginVertical: 10,
        height: 43,
        paddingHorizontal: 10,
    },
    dateTimePicker: {
        backgroundColor: 'white',
        borderRadius: 5,
        borderColor: '#C5C5C5',
        borderWidth: 1,
        marginVertical: 10,
        height: 43,
   },
})

如果需要更灵活的弹窗样式，把DateTimePicker放在自定义Modal内即可，Modal的背景色可通过transparent属性和自定义蒙层样式调整。

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