我正在创建一个 Drawer 使用createDrawerNavigator
并创建一个customDrawerComponent
当我传递<DrawerItems {...props} />
它给我错误时:
Invariant Violation: 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.Your likely from forget to export your component from the file it's defined in, or might have mixed up default and named imports.
我不明白我的代码有什么问题。请帮我修复它。
这是我的代码:App.js
const AppStackNavigator = createStackNavigator({
Home_Page: { screen: HomePage }
})
//customdrawerComponent start here
const customDrawerComponent = (props) => {
return (
<Fragment>
<SafeAreaView style={{ flex: 0, backgroundColor: "#9dc7c1" }} />
<SafeAreaView style={{ flex: 1, backgroundColor: "#ffffff" }}>
<View>
<Text
style={{
marginTop: 10,
marginHorizontal: 20,
fontSize: 16,
fontWeight: "500",
color: "#ffffff"
}}
>
Parent name
</Text>
</View>
<ScrollView>
<DrawerItems {...props} />
</ScrollView>
</SafeAreaView>
</Fragment>
)
}
//End here
const DrawerNav = createDrawerNavigator(
{
Home_Page: { screen: AppStackNavigator },
Signout: { screen: SignOut }
},
{
drawerPosition: "left",
contentComponent: customDrawerComponent,
}
);
const MainNavigator = createSwitchNavigator({
Decision: { screen: Decision },
Login_Screen: { screen: Login },
Otp: { screen: OtpScreen },
Home: { screen: DrawerNav }
});
const Container = createAppContainer(MainNavigator);
主页.js
export default HomePage class extends Component{
static navigationOptions = ({ navigation }) => {
return{
title: 'Home',
headerLeft: null,
headerStyle: {
backgroundColor: "#ff6a00"
},
headerLeft:(
<View style={{paddingLeft:10}}>
<Icon name='toggle-right' size={25}
color="#ffffff"
onPress={()=> navigation.openDrawer()}
/>
</View>
),
headerTitleStyle: {
flex: 1,
color: "#fff",
alignItems: "center",
justifyContent: "center",
fontWeight: "600"
}
}
};
render(){
return(
<View>
</View>
)
}
}