React Native DateTimePicker安卓返回键关闭后状态未重置问题

• 代码中使用的onBackdropPress、onTouchCancel、独立的onCancel都不是@react-native-community/datetimepicker组件支持的API，这些属性写在组件上不会触发任何逻辑，属于无效代码。
• 安卓端按下硬件返回键时，DateTimePicker会在系统层面自动关闭，但不会将关闭动作同步回React状态层，导致控制显隐的showDatePicker始终停留在true。
• 后续在同页面TextInput输入内容时，会触发组件重渲染，此时条件渲染判断showDatePicker仍为true，就会重新把DateTimePicker挂载到页面上，出现反复自动弹出的现象。

第一步：清理无效代码 #

把DateTimePicker上所有不支持的属性移除，包括：

• onTouchCancel
• onCancel
• onBackdropPress

第二步：通过BackHandler拦截安卓硬件返回动作 #

使用React Native内置的BackHandlerAPI，在DateTimePicker显示时拦截硬件返回键，同步更新显隐状态。针对类组件的适配代码如下：

import { BackHandler } from 'react-native';

// 组件挂载时注册返回键监听
componentDidMount() {
  this.backEventListener = BackHandler.addEventListener(
    'hardwareBackPress',
    this.handleBackAction
  );
}

// 组件卸载时移除监听，避免内存泄漏
componentWillUnmount() {
  this.backEventListener.remove();
}

// 自定义返回键处理逻辑
handleBackAction = () => {
  // 仅当DateTimePicker处于显示状态时拦截返回事件
  if (this.state.showDatePicker) {
    this.setState({ showDatePicker: false });
    // 返回true代表拦截系统默认返回逻辑，不触发页面跳转
    return true;
  }
  // DateTimePicker未显示时，不拦截返回事件，走系统默认逻辑
  return false;
}

第三步：在onChange回调中做状态兜底同步 #

安卓端DateTimePicker的所有关闭、确认动作都会统一触发onChange回调，通过回调返回的event.type可以区分是确认选择还是取消关闭动作，利用这个机制做状态同步的双保险：

{this.state.showDatePicker && 
    <DateTimePicker
        value={new Date(new Date().getFullYear()-18, 1, 1)}
        minimumDate={new Date(1900, 1, 1)}
        maximumDate={new Date(new Date().getFullYear()-18, 1, 1)}
        locale={"en"}
        // 其他原有配置保持不变
        onChange={(event, selectedDate) => {
            // 不管是确认还是取消触发关闭，先把显隐状态重置为false
            this.setState({ showDatePicker: false });
            // 仅在用户确认选择日期时，更新选中的日期值
            if (event.type === 'set') {
                this.onDateChange(event, selectedDate);
            }
        }}
    />
}

补充说明：安卓端DateTimePicker的取消动作（包括按返回键、点取消按钮）不会单独触发独立的onCancel回调，所有交互状态都可以从onChange的入参中读取；iOS端的交互逻辑和安卓有差异，但同样可以通过这个onChange回调完成状态同步，不需要额外适配其他API。

内容的提问来源于stack exchange，提问作者Mrigank Shekhar Shringi