因此，我主要使用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)
答案 0 :(得分：0)
今天，Native Base（v2.4.3）也遇到了同样的问题。
要解决此问题，您必须将Native Base更新到v2.7或更高版本。 请注意，Native Base v2.7 +需要React Native v0.56 +，因此您可能还必须更新RN本身（请参见https://medium.com/react-native-training/updating-your-react-native-app-a724c996a76d）。
关于更新Native Base本身，这非常容易，只需调整package.json中的版本号，删除node_modules：
rm -rf node_modules
，然后运行全新安装。
npm install or yarn install
之后，导入DatePicker组件将正常工作。