React Native使用react-native-date-picker报openPicker为null的TypeError错误

我在React Native项目中使用react-native-date-picker，通过yarn expo start在Android Studio启动应用时，出现以下错误：

ERROR TypeError: Cannot read property 'openPicker' of null

我的组件代码如下：

import { StyleSheet, Text, View, TouchableHighlight } from 'react-native';
import InputField from './InputField';
import React from 'react';
import *  as StorageHandler from '../handlers/StorageHandler'
import Appointment from '../utils/Appointment';
import DatePicker from 'react-native-date-picker';
export default function AddNewPage() {
    const [name, setName] = React.useState("");
    const [rate, setRate] = React.useState(0);

    //datePicker state
    const [date, setDate] = React.useState(new Date());
    const [open, setOpen] = React.useState(false);
    const handleOnChangeDate = (newValue) => {
        setDate(newValue);
    }
    const handleOnChangeName = (newValue) => {
        setName(newValue);
    }
    const handleOnChangeRate = (newValue) => {
        setRate(newValue);
    }
    const onSaveHandler = async () => {
        console.log(rate);
        const newAppointment = new Appointment(name, date, rate);
        StorageHandler.setNewAppointment(newAppointment);

        try {
            const stats = await StorageHandler.getAllValues();
            console.log(stats);
        } catch (error) {
            console.error(error);
        }
    }
    return (
        <View style={styles.mainContainer}>
            <View style={styles.visibleContainer}>
                <View style={styles.inputContainer}>
                    <InputField  keyboardType={'default'} onChange={handleOnChangeName} placeholder="    |Name" />
                    <TouchableHighlight style={styles.date} onPress={() => setOpen(true)}>
                        <Text style={{color:"#626262"}}>  |date</Text>
                    </TouchableHighlight>
                    <DatePicker
                        modal
                        androidVariant='iosClone'
                        mode="date"
                        open={open}
                        date={date}
                        onConfirm={(date) => {
                            setOpen(false)
                            setDate(date)
                        }}
                        onCancel={() => {
                            setOpen(false)
                        }}
                    />
                    <InputField  keyboardType={'numeric'} onChange={handleOnChangeRate} placeholder="     |redate-rate" />
                </View>
                <View style={styles.buttonContainer}>
                    <TouchableHighlight style={styles.button} onPress={onSaveHandler}>
                        <Text >Save</Text>
                    </TouchableHighlight>
                </View>
            </View>
        </View>
    );
}
const styles = StyleSheet.create({
    mainContainer: {
        paddingBottom: 20,
        display: 'flex',
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'space-between',
        justifyContent: 'center',
        alignItems: 'center',
    },
    inputContainer: {
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'space-between',
        alignItems: 'center',
        gap: 30,
        paddingTop: 20,
    },
    
    visibleContainer: {
        display: 'flex',
        flexDirection: 'column',
        width: 300,
        height: 250,
        backgroundColor: '#D9D9D9',
        borderRadius: 10,
        padding: 15,
    },
    buttonContainer: {
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        paddingTop: 20,
    },
    button: {
        borderRadius: 5,
        width: 80,
        height: 25,
        backgroundColor: '#4EAAFF',
        justifyContent: 'center',
        alignItems: 'center',
    },
    date: {
        borderRadius: 5,
        width: 218,
        height: 27,
        backgroundColor: 'white',
        justifyContent: 'center',
    }
});

package.json内容：

{ 
    "name": "doctor-manager", 
    "version": "1.0.0", 
    "scripts": { 
        "start": "expo start --dev-client", 
        "android": "expo run:android", 
        "ios": "expo run:ios", 
        "web": "expo start --web" 
    }, 
    "dependencies": { 
        "@react-native-async-storage/async-storage": "^1.18.1", 
        "@react-navigation/native": "^6.1.6", 
        "@react-navigation/native-stack": "^6.9.12", 
        "expo": "~48.0.11", 
        "expo-dev-client": "~2.2.1", 
        "expo-splash-screen": "~0.18.1", 
        "expo-status-bar": "~1.4.4", 
        "react": "18.2.0", 
        "react-native": "0.71.6", 
        "react-native-date-picker": "^4.2.11", 
        "react-native-safe-area-context": "^4.5.1", 
        "react-native-screens": "^3.20.0" 
    }, 
    "devDependencies": { 
        "@babel/core": "^7.20.0", 
        "@tsconfig/react-native": "^3.0.0", 
        "@types/jest": "^29.5.0", 
        "@types/react": "^18.0.37", 
        "@types/react-test-renderer": "^18.0.0", 
        "typescript": "^5.0.4" 
    }, 
    "private": true 
}

完整错误栈：

ERROR TypeError: Cannot read property 'openPicker' of null

This error is located at:
in DatePickerAndroid (created by DatePickerWrapper)
in DatePickerWrapper (created by AddNewPage)
in RCTView (created by View)
in View (created by AddNewPage)
in RCTView (created by View)
in View (created by AddNewPage)
in RCTView (created by View)
in View (created by AddNewPage)
in AddNewPage (created by SceneView)
in StaticContainer
in EnsureSingleNavigator (created by SceneView)
in SceneView (created by SceneView)
in RCTView (created by View)
in View (created by DebugContainer)
in DebugContainer (created by MaybeNestedStack)
in MaybeNestedStack (created by SceneView)
in RCTView (created by View)
in View (created by SceneView)
in RNSScreen (created by AnimatedComponent)
in AnimatedComponent
in AnimatedComponentWrapper (created by InnerScreen)
in Suspender (created by Freeze)
in Suspense (created by Freeze)
in Freeze (created by DelayedFreeze)
in DelayedFreeze (created by InnerScreen)
in InnerScreen (created by Screen)
in Screen (created by SceneView)
in SceneView (created by NativeStackViewInner)
in Suspender (created by Freeze)
in Suspense (created by Freeze)
in Freeze (created by DelayedFreeze)
in DelayedFreeze (created by ScreenStack)
in RNSScreenStack (created by ScreenStack)
in ScreenStack (created by NativeStackViewInner)
in NativeStackViewInner (created by NativeStackView)
in RNCSafeAreaProvider (created by SafeAreaProvider)
in SafeAreaProvider (created by SafeAreaInsetsContext)
in SafeAreaProviderCompat (created by NativeStackView)
in NativeStackView (created by NativeStackNavigator)
in PreventRemoveProvider (created by NavigationContent)
in NavigationContent
in Unknown (created by NativeStackNavigator)
in NativeStackNavigator (created by App)
in EnsureSingleNavigator
in BaseNavigationContainer
in ThemeProvider
in NavigationContainerInner (created by App)
in App (created by withDevTools(App))
in withDevTools(App)
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in main(RootComponent), js engine: hermes

我已搜索相关内容但未找到解决方案，希望得到帮助。

解决方案 #

这个错误的核心原因是react-native-date-picker的原生模块未正确链接或适配Expo环境，可按以下步骤排查修复：

1. 清理缓存并重新构建项目
   执行以下命令彻底清理依赖缓存，重新安装并构建：

   rm -rf node_modules
   rm package-lock.json yarn.lock
   yarn cache clean
   yarn install
   expo run:android
   

2. 确保依赖版本兼容
   当前使用的react-native-date-picker@4.2.11与Expo 48可能存在兼容性问题，尝试升级到适配版本：

   yarn add react-native-date-picker@latest
   

   升级后重新执行expo run:android构建项目。

3. 重新预构建原生项目
   由于使用Expo Dev Client，需要确保原生项目已正确包含react-native-date-picker的模块：

   expo prebuild --clean
   expo run:android
   

4. 替换为Expo官方日期选择器
   如果以上方法无效，建议使用Expo官方提供的expo-date-picker，它完全适配Expo环境，无需手动处理原生链接：

   • 安装依赖：

     expo install expo-date-picker
     

   • 修改组件代码中的导入和使用逻辑：

     import DatePicker from 'expo-date-picker';
     
     // 替换原DatePicker组件
     <DatePicker
       date={date}
       onDateChange={setDate}
       display="modal"
       mode="date"
       onCancel={() => setOpen(false)}
     />
     

5. 检查Android配置
   确认Android项目的AndroidManifest.xml中已添加必要权限，react-native-date-picker通常会自动配置，但可手动检查：

   <uses-permission android:name="android.permission.INTERNET" />
   

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