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

Question

我正在构建一个带有预订部分的应用程序。booking部分有一个日期时间选择器，显然可以用来选择日期和时间。

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

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

检查SceneView的render方法。

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

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。

有关更多说明，请参考this。