React Native Project - 使用Native-Base DatePicker会引发Invariant Violation错误

因此，我主要使用React Native为我的应用创建一个注册表单，其中一些组件是从Native Base导入的 . 其中一个组件似乎没有正确呈现，并给我一个不变的违规错误 .

我不知道为什么，并且想知道这里是否有人可以解释最新情况 .

当我删除DatePicker时，组件被渲染得很好.....但是包含了DatePicker，错误说是检查我的组件被导出的方式，这对我来说没有意义 .

这是我特定屏幕的代码 . 我不认为我需要添加任何其他内容，但如果需要请告诉我 .

import { View, Text, TextInput } from 'react-native';
import { Button, Card, CardItem, Form, Item, Label, Input, DatePicker } from 'native-base';
import { emailChanged, passwordChanged } from '../actions';
import Icon from 'react-native-vector-icons/Ionicons';

class PersInfoScreen extends React.Component {
  onEmailChange(text) {
    this.props.emailChanged(text);
  }

  onPasswordChange(text) {
    this.props.passwordChanged(text);
  }



  render() {
    return (
      <View style={{ backgroundColor: '#03A9F4', flex: 1 }}>
        <Text style={{ color: '#fff' }}>Signup below to start raising money for charity everytime you run.</Text>
        <Form>
        <View style={styles.formBox}>
        <DatePicker
          defaultDate={new Date(2018, 4, 4)}
          minimumDate={new Date(2018, 1, 1)}
          maximumDate={new Date(2018, 12, 31)}
          locale={"en"}
          timeZoneOffsetInMinutes={undefined}
          modalTransparent={false}
          animationType={"fade"}
          androidMode={"default"}
          placeHolderText="Select date"
          textStyle={{ color: "green" }}
          placeHolderTextStyle={{ color: "#d3d3d3" }}
          />
            <Item stackedLabel style={{ margin: 8 }}>
              <Label style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>First Name:</Label>
              <Input />
            </Item>
            <Item stackedLabel style={{ margin: 8 }}>
              <Label style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Last Name:</Label>
              <Input />
            </Item>
            <Item stackedLabel style={{ margin: 8 }}>
              <Label style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Email:</Label>
              <Input />
            </Item>
            <Item stackedLabel style={{ margin: 8 }}>
              <Label style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Date Of Birth</Label>
              <Input />
            </Item>
            <Item stackedLabel style={{ margin: 8 }}>
              <Label style={{ color: '#fff', fontSize: 16, fontWeight: 'bold', paddingBottom: 5 }}>Gender:</Label>
              <View style={{ flex: 1, flexDirection: 'row', margin: 10, alignItems: 'center', justifyContent: 'center' }}>
                <Icon style={styles.iconStyles} name="ios-man" size={36} color="white"/><Text>Man</Text>
                <Icon style={styles.iconStyles} name="ios-woman" size={36} color="white"/><Text>Woman</Text>
              </View>
            </Item>
            <Button><Text>Next</Text></Button>
          </View>
        </Form>
      </View>
    )
  }
}

export default PersInfoScreen;

const styles = {
   iconStyles: {
     fontSize: 30,
     margin: 10
   },
   formBox: {
     margin: 20,
     borderWidth: 5,
     borderRadius: 10,
     borderColor: '#fff'
   }
 }

错误代码：

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 `PersInfoScreen`.

This error is located at:
    in RCTView (at View.js:60)
    in View (at PersInfoScreen.js:23)
    in RCTView (at View.js:60)
    in View (at Form.js:10)
    in Form (at connectStyle.js:384)
    in Styled(Form) (at PersInfoScreen.js:22)
    in RCTView (at View.js:60)
    in View (at PersInfoScreen.js:20)
    in PersInfoScreen (at SceneView.js:10)
    in SceneView (at StackViewLayout.js:475)
    in RCTView (at View.js:60)
    in View (at StackViewLayout.js:474)
    in RCTView (at View.js:60)
    in View (at StackViewLayout.js:473)
    in RCTView (at View.js:60)
    in View (at createAnimatedComponent.js:154)
    in AnimatedComponent (at StackViewCard.js:12)
    in Card (at createPointerEventsContainer.js:28)
    in Container (at StackViewLayout.js:537)
    in RCTView (at View.js:60)
    in View (at StackViewLayout.js:432)
    in RCTView (at View.js:60)
    in View (at StackViewLayout.js:431)
    in StackViewLayout (at withOrientation.js:30)
    in withOrientation (at StackView.js:58)
    in RCTView (at View.js:60)
    in View (at Transitioner.js:146)
    in Transitioner (at StackView.js:22)
    in StackView (at createNavigator.js:96)
    in Navigator (at createKeyboardAwareNavigator.js:11)
    in KeyboardAwareNavigator (at createNavigationContainer.js:393)
    in NavigationContainer (at SceneView.js:10)
    in SceneView (at StackViewLayout.js:475)
    in RCTView (at View.js:60)
    in View (at StackViewLayout.js:474)
    in RCTView (at View.js:60)
    in View (at StackViewLayout.js:473)
    in RCTView (at View.js:60)
    in View (at createAnimatedComponent.js:154)
    in AnimatedComponent (at StackViewCard.js:12)
    in Card (at createPointerEventsContainer.js:28)
    in Container (at StackViewLayout.js:537)
    in RCTView (at View.js:60)
    in View (at StackViewLayout.js:432)
    in RCTView (at View.js:60)
    in View (at StackViewLayout.js:431)
    in StackViewLayout (at withOrientation.js:30)
    in withOrientation (at StackView.js:58)
    in RCTView (at View.js:60)
    in View (at Transitioner.js:146)
    in Transitioner (at StackView.js:22)
    in StackView (at createNavigator.js:96)
    in Navigator (at createKeyboardAwareNavigator.js:11)
    in KeyboardAwareNavigator (at createNavigationContainer.js:393)
    in NavigationContainer (at SceneView.js:10)
    in SceneView (at SwitchView.js:12)
    in SwitchView (at createNavigator.js:96)
    in Navigator (at createNavigationContainer.js:393)
    in NavigationContainer (at App.js:28)
    in RCTView (at View.js:60)
    in View (at App.js:27)
    in Provider (at App.js:26)
    in App (at renderApplication.js:33)
    in RCTView (at View.js:60)
    in View (at AppContainer.js:102)
    in RCTView (at View.js:60)
    in View (at AppContainer.js:122)
    in AppContainer (at renderApplication.js:32)