我无法让抽屉导航与 NativeBase 一起使用，它在另一个文件中运行良好，但是当它添加到我正在处理的项目中时，我收到此错误： 未定义不是对象（评估 '_this.props.navigationProps. toggleDrawer') 我看过几篇有相同错误的帖子，但没有一个对我有用，我确信这是我犯的一个简单的 JavaScript 错误。
我已经从这个文件中删除了很多内容来浓缩我在这里发布的内容，但这应该足以显示我的问题。
"react-native-navigation": "^2.27.9",
"react-native-reanimated": "1.2.0",
"react-native-screens": "1.0.0-alpha.22",
"react-native-vector-icons": "6.6.0",
"react-navigation": "4.0.7",
"react-navigation-drawer": "^2.2.2",
"react-navigation-stack": "1.8.1",
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import { createDrawerNavigator } from "react-navigation-drawer";
import Screen1 from "./pages/Screen1";
class HomeScreen extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
static navigationOptions = {
header: null
};
toggleDrawer = () => {
this.props.navigationProps.toggleDrawer();
};
render() {
return (
<Container>
<Header style={{ backgroundColor: "#000" }}>
<Left style={{ flexDirection: "row" }}>
<Icon
//onPress={() =>this.props.navigationProps.toggleDrawer();}
onPress={this.toggleDrawer.bind(this)}
name="md-menu"
style={{ color: "white", marginRight: 15 }}
/>
</Left>
<Body>
<Title>Title</Title>
</Body>
<Right />
</Header>
<Content>
<View>
<Image
source={require("../images/fileL.jpg")}
style={{ height: 200, width: 200, flex: 1 }}
/>
</View>
<List>
<ListItem onPress={() => this.props.navigation.navigate("Stuff")}>
<Left>
<Thumbnail square source={require("../images/file.jpg")} />
<View
style={{
marginLeft: 15,
marginTop: 15,
justifyContent: "center",
flex: 1
}}
>
<Text>Heading</Text>
</View>
</Left>
<Right>
<Icon name="arrow-forward" />
</Right>
</ListItem>
</List>
</Content>
<Footer>
<FooterTab style={{ backgroundColor: "#6B52AE" }}>
<Button>
<Grid>
<Col>
<View
style={{
flex: 1,
alignItems: "center",
justifyContent: "center"
}}
>
<Text
style={{
color: "#FFF",
fontSize: 22,
fontWeight: "bold"
}}
>
TOTAL
</Text>
</View>
</Col>
<Col>
<View
style={{
flex: 1,
alignItems: "center",
justifyContent: "center"
}}
>
<Text
style={{
color: "#FFF",
fontSize: 16
}}
>
TEXT
</Text>
</View>
</Col>
<Col>
<View
style={{
flex: 1,
alignItems: "center",
justifyContent: "center"
}}
>
<Text style={{ color: "#FFF" }}>
<Icon style={{ color: "#FFF" }} name="arrow-forward" />
</Text>
</View>
</Col>
</Grid>
</Button>
</FooterTab>
</Footer>
</Container>
);
}
}
class Stuff extends React.Component {
static navigationOptions = {
headerStyle: {
backgroundColor: "#6B52AE"
},
headerTitle: "Stuff",
headerTintColor: "#fff"
};
render() {
return (
<Container>
<Content padder>
<Grid />
</Content>
</Container>
);
}
}
const FirstActivity_StackNavigator = createStackNavigator({
First: {
screen: Screen1,
navigationOptions: ({ navigation }) => ({
title: "Demo Screen 1",
headerLeft: <HomeScreen navigationProps={navigation} />,
headerStyle: {
backgroundColor: "#FF9800"
},
headerTintColor: "#fff"
})
}
});
const Screen2_StackNavigator = createStackNavigator({
Second: {
screen: Screen2,
navigationOptions: ({ navigation }) => ({
title: "Demo Screen 2",
headerLeft: <HomeScreen navigationProps={navigation} />,
headerStyle: {
backgroundColor: "#FF9800"
},
headerTintColor: "#fff"
})
}
});
const Screen3_StackNavigator = createStackNavigator({
Third: {
screen: Screen3,
navigationOptions: ({ navigation }) => ({
title: "Demo Screen 3",
headerLeft: <HomeScreen navigationProps={navigation} />,
headerStyle: {
backgroundColor: "#FF9800"
},
headerTintColor: "#fff"
})
}
});
const DrawerNavigator = createDrawerNavigator({
Screen1: {
//Title
screen: FirstActivity_StackNavigator,
navigationOptions: {
drawerLabel: "Demo Screen 1"
}
}
});
const RootStack = createStackNavigator(
{
Home: HomeScreen,
Stuff: Stuff
},
{
initialRouteName: "Home"
}
);
const AppContainer = createAppContainer(RootStack, DrawerNavigator);
export default class App extends React.Component {
render() {
return <AppContainer />;
}
}