React Native Project-使用Native Base DatePicker会引发一个不变冲突错误

Question

因此，我主要使用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)

Answer 1

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本身，这很容易，只需调整包.json中的版本号，删除node_modules:

rm -rf node_modules

然后重新安装。

npm install or yarn install

之后，DatePicker组件的导入将正常工作。