javascript - DatePicker UI-Kitten 不变违规

Question

试图在这里解决这个问题，但我不明白是什么原因导致的......

我在项目中使用日历组件，没有出现任何问题。然而，我认为用 DatePicker 替换它会更方便，它显然使用几乎相同的东西。这是我到目前为止的代码(相关部分):

import React from 'react'; 
import {   
            Alert,
            ScrollView, 
            StyleSheet, 
            View, 
            InteractionManager, 
            Image, 
            TextInput, 
            TouchableOpacity, 
            BackHandler 


        } from 'react-native';

import {
  Card,
  CardHeader,
  Layout,
  Text,
  Calendar,
  DatePicker,
  Spinner,
} from '@ui-kitten/components';

import { TaskCard } from './components/task-card';


import { validate } from 'validate.js';

import { Auth, Storage, API, graphqlOperation, scTracker } from '../modules/commons'; 
import Styles from '../modules/styles';
import constraints from './fields/constraints';


import Ionicons from 'react-native-vector-icons/Ionicons';

import { CustomCalendar } from './components/custom-calendar';


class TasksScreen extends React.Component {
    static navigationOptions = { 
        title: "Atividades",     
    };

    state = {
      cDate: null,
      showCalendar: false,
    };

    constructor(props) { 
        super(props);

    };

    componentDidMount() {
        try {
            let lcDate = new Date();
            this.setState({
                cDate: lcDate,
            });
        } catch (e) {
            console.log(e);
        };
    };

    render() {
        return(

. . . . . 

                    <Layout level="2" style={{width:"100%"}}>

                        <DatePicker     date={this.state.cDate}
                                        onSelect={(date)=>{this.setState({cDate: date})}} 
                        />

                    </Layout>


                    <ScrollView contentContainerStyle={Styles.vScrollViewContent}>

                        <TaskCard

. . . . . .

但由于某种原因，使用完全相同的参数，它开始触发一个错误，该错误恰好指向包装日期选择器的布局行(与所有其他布局对象一样):

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s%s, undefined,  You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check your code at tasks-scr.js:91., 
    in TasksScreen (at SceneView.js:9)
    in SceneView (at createTabNavigator.tsx:67)
    in RCTView (at View.js:45)
    in View (at SceneView.tsx:92)
    in SceneView (at TabView.tsx:173)
    in RCTView (at View.js:45)
    in View (at createAnimatedComponent.js:217)
    in AnimatedComponent (at Pager.tsx:667)
    in PanGestureHandler (at Pager.tsx:659)
    in Pager (at TabView.tsx:70)
    in RCTView (at View.js:45)
    in View (at TabView.tsx:128)
    in TabView (at createMaterialTopTabNavigator.tsx:136)
    in MaterialTabView (at createTabNavigator.tsx:228)
    in NavigationView (at createNavigator.js:80)
    in Navigator (at SceneView.js:9)
    in SceneView (at StackViewLayout.tsx:889)
    in RCTView (at View.js:45)
    in View (at StackViewLayout.tsx:888)
    in RCTView (at View.js:45)
    in View (at StackViewLayout.tsx:887)
    in RCTView (at View.js:45)
    in View (at createAnimatedComponent.js:151)
    in AnimatedComponent (at StackViewCard.tsx:106)
    in RCTView (at View.js:45)
    in View (at createAnimatedComponent.js:151)
    in AnimatedComponent (at screens.native.js:71)
    in Screen (at StackViewCard.tsx:93)
    in Card (at createPointerEventsContainer.tsx:95)
    in Container (at StackViewLayout.tsx:975)
    in RCTView (at View.js:45)
    in View (at screens.native.js:101)
    in ScreenContainer (at StackViewLayout.tsx:384)
    in RCTView (at View.js:45)
    in View (at createAnimatedComponent.js:151)
    in AnimatedComponent (at StackViewLayout.tsx:374)
    in PanGestureHandler (at StackViewLayout.tsx:367)
    in StackViewLayout (at withOrientation.js:30)
    in withOrientation (at StackView.tsx:104)
    in RCTView (at View.js:45)
    in View (at Transitioner.tsx:267)
    in Transitioner (at StackView.tsx:41)
    in StackView (at createNavigator.js:80)
    in Navigator (at createKeyboardAwareNavigator.js:12)
    in KeyboardAwareNavigator (at SceneView.js:9)
    in SceneView (at StackViewLayout.tsx:889)
    in RCTView (at View.js:45)
    in View (at StackViewLayout.tsx:888)
    in RCTView (at View.js:45)
    in View (at StackViewLayout.tsx:887)
    in RCTView (at View.js:45)
    in View (at createAnimatedComponent.js:151)
    in AnimatedComponent (at StackViewCard.tsx:106)
    in RCTView (at View.js:45)
    in View (at createAnimatedComponent.js:151)
    in AnimatedComponent (at screens.native.js:71)
    in Screen (at StackViewCard.tsx:93)
    in Card (at createPointerEventsContainer.tsx:95)
    in Container (at StackViewLayout.tsx:975)
    in RCTView (at View.js:45)
    in View (at screens.native.js:101)
    in ScreenContainer (at StackViewLayout.tsx:384)
    in RCTView (at View.js:45)
    in View (at createAnimatedComponent.js:151)
    in AnimatedComponent (at StackViewLayout.tsx:374)
    in PanGestureHandler (at StackViewLayout.tsx:367)
    in StackViewLayout (at withOrientation.js:30)
    in withOrientation (at StackView.tsx:104)
    in RCTView (at View.js:45)
    in View (at Transitioner.tsx:267)
    in Transitioner (at StackView.tsx:41)
    in StackView (at createNavigator.js:80)
    in Navigator (at createKeyboardAwareNavigator.js:12)
    in KeyboardAwareNavigator (at createAppContainer.js:430)
    in NavigationContainer (at App.js:21)
    in RCTView (at View.js:45)
    in View (at modalPanel.component.js:62)
    in ModalPanel (at applicationProvider.component.js:68)
    in ThemeProvider (at styleProvider.component.js:13)
    in MappingProvider (at styleProvider.component.js:12)
    in StyleProvider (at applicationProvider.component.js:67)
    in ApplicationProvider (at App.js:19)
    in App (at withExpoRoot.js:20)
    in RootErrorBoundary (at withExpoRoot.js:19)
    in ExpoRootComponent (at renderApplication.js:35)
    in RCTView (at View.js:45)
    in View (at AppContainer.js:98)
    in RCTView (at View.js:45)
    in View (at AppContainer.js:115)
    in AppContainer (at renderApplication.js:34)
- node_modules/expo/build/environment/muteWarnings.fx.js:27:24 in error
- node_modules/react/cjs/react.development.js:188:36 in warningWithoutStack
- node_modules/react/cjs/react.development.js:603:32 in warning
- node_modules/react/cjs/react.development.js:1730:14 in createElementWithValidation
* src/screens/tasks-scr.js:91:25 in render
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:11581:21 in finishClassComponent
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:11509:4 in updateClassComponent
- ... 15 more stack frames from framework internals

Invariant Violation: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `TasksScreen`.
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:5716:10 in createFiberFromTypeAndProps
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:5744:4 in createFiberFromElement
- ... 19 more stack frames from framework internals

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in %s.%s, the componentWillUnmount method, 
    in TabBar (at MaterialTopTabBar.tsx:92)
    in TabBarTop (at createMaterialTopTabNavigator.tsx:84)
    in Pager (at TabView.tsx:70)
    in RCTView (at View.js:45)
    in View (at TabView.tsx:128)
    in TabView (at createMaterialTopTabNavigator.tsx:136)
    in MaterialTabView (at createTabNavigator.tsx:228)
    in NavigationView (at createNavigator.js:80)
    in Navigator (at SceneView.js:9)
    in SceneView (at StackViewLayout.tsx:889)
    in RCTView (at View.js:45)
    in View (at StackViewLayout.tsx:888)
    in RCTView (at View.js:45)
    in View (at StackViewLayout.tsx:887)
    in RCTView (at View.js:45)
    in View (at createAnimatedComponent.js:151)
    in AnimatedComponent (at StackViewCard.tsx:106)
    in RCTView (at View.js:45)
    in View (at createAnimatedComponent.js:151)
    in AnimatedComponent (at screens.native.js:71)
    in Screen (at StackViewCard.tsx:93)
    in Card (at createPointerEventsContainer.tsx:95)
    in Container (at StackViewLayout.tsx:975)
    in RCTView (at View.js:45)
    in View (at screens.native.js:101)
    in ScreenContainer (at StackViewLayout.tsx:384)
    in RCTView (at View.js:45)
    in View (at createAnimatedComponent.js:151)
    in AnimatedComponent (at StackViewLayout.tsx:374)
    in PanGestureHandler (at StackViewLayout.tsx:367)
    in StackViewLayout (at withOrientation.js:30)
    in withOrientation (at StackView.tsx:104)
    in RCTView (at View.js:45)
    in View (at Transitioner.tsx:267)
    in Transitioner (at StackView.tsx:41)
    in StackView (at createNavigator.js:80)
    in Navigator (at createKeyboardAwareNavigator.js:12)
    in KeyboardAwareNavigator (at SceneView.js:9)
    in SceneView (at StackViewLayout.tsx:889)
    in RCTView (at View.js:45)
    in View (at StackViewLayout.tsx:888)
    in RCTView (at View.js:45)
    in View (at StackViewLayout.tsx:887)
    in RCTView (at View.js:45)
    in View (at createAnimatedComponent.js:151)
    in AnimatedComponent (at StackViewCard.tsx:106)
    in RCTView (at View.js:45)
    in View (at createAnimatedComponent.js:151)
    in AnimatedComponent (at screens.native.js:71)
    in Screen (at StackViewCard.tsx:93)
    in Card (at createPointerEventsContainer.tsx:95)
    in Container (at StackViewLayout.tsx:975)
    in RCTView (at View.js:45)
    in View (at screens.native.js:101)
    in ScreenContainer (at StackViewLayout.tsx:384)
    in RCTView (at View.js:45)
    in View (at createAnimatedComponent.js:151)
    in AnimatedComponent (at StackViewLayout.tsx:374)
    in PanGestureHandler (at StackViewLayout.tsx:367)
    in StackViewLayout (at withOrientation.js:30)
    in withOrientation (at StackView.tsx:104)
    in RCTView (at View.js:45)
    in View (at Transitioner.tsx:267)
    in Transitioner (at StackView.tsx:41)
    in StackView (at createNavigator.js:80)
    in Navigator (at createKeyboardAwareNavigator.js:12)
    in KeyboardAwareNavigator (at createAppContainIjs:430)
- node_modules/expo/build/environment/muteWarnings.fx.js:27:24 in error

提前感谢各位!!

Answer 1

此库中没有 DatePicker 组件。但是，有Datepicker