如何使用react-native-community中的datetimepicker

Question

我正在构建一个具有预订部分的应用程序。预订部分有一个datetimepicker，用于选择日期和时间。

在网上搜索，我找到了@react-native-community/datetimepicker，并通过npm安装并复制粘贴到他们的GitHub上。然而，当我在expo start上运行应用程序时，我得到了一个错误消息:

错误:元素类型无效:期望是字符串(对于内置组件)或类/函数(对于组合组件)，但得到:未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

检查SceneView的渲染方法

我不知道我的错误在哪里。有人能帮我吗?

import React, {useState} from 'react';
import {View, Button, Platform} from 'react-native';
import DateTimePicker from '@react-native-community/datetimepicker';
export const App = () => {
const [date, setDate] = useState(new Date(1598051730000));
const [mode, setMode] = useState('date');
const [show, setShow] = useState(false);
const onChange = (event, selectedDate) => {
const currentDate = selectedDate || date;
setShow(Platform.OS === 'ios');
setDate(currentDate);
};
const showMode = (currentMode) => {
setShow(true);
setMode(currentMode);
};
const showDatepicker = () => {
showMode('date');
};
const showTimepicker = () => {
showMode('time');
};
return (
<View>
<View>
<Button onPress={showDatepicker} title="Show date picker!" />
</View>
<View>
<Button onPress={showTimepicker} title="Show time picker!" />
</View>
{show && (
<DateTimePicker
testID="dateTimePicker"
value={date}
mode={mode}
is24Hour={true}
display="default"
onChange={onChange}
/>
)}
</View>
);
};

Answer 1

用export default const App代替export const App

详细说明请参考