React native 使用抽屉导航时出错-未定义的不是对象（正在计算'；"this.props.navigationProps.toggleDrawer'；"
我无法让抽屉导航与NativeBase一起使用，它在另一个文件中运行良好，但当它添加到我正在处理的项目中时，我遇到以下错误： 未定义不是对象（计算“\u this.props.navigationProps.toggleDrawer”） 我看过好几篇文章都有相同的错误，但没有一篇适合我，我确信这是我犯的一个简单的JavaScript错误 我从这个文件中删除了很多内容来浓缩我在这里发布的内容，但这应该足以说明我的问题React native 使用抽屉导航时出错-未定义的不是对象（正在计算'；"this.props.navigationProps.toggleDrawer'；",react-native,react-navigation,native-base,react-navigation-stack,react-navigation-drawer,React Native,React Navigation,Native Base,React Navigation Stack,React Navigation Drawer,我无法让抽屉导航与NativeBase一起使用，它在另一个文件中运行良好，但当它添加到我正在处理的项目中时，我遇到以下错误： 未定义不是对象（计算“\u this.props.navigationProps.toggleDrawer”） 我看过好几篇文章都有相同的错误，但没有一篇适合我，我确信这是我犯的一个简单的JavaScript错误 我从这个文件中删除了很多内容来浓缩我在这里发布的内容，但这应该足以说明我的问题 "react-native-navigation": "^2.27.9", "r
"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",
从“反应导航”导入{createAppContainer}；
从“反应导航堆栈”导入{createStackNavigator}；
从“react navigation drawer”导入{createDrawerNavigator}；
从“/pages/Screen1”导入屏幕1；
类主屏幕扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={}；
}
静态导航选项={
标题：空
};
toggleDrawer=（）=>{
this.props.navigationProps.toggleDrawer（）；
};
render（）{
返回(
this.props.navigationProps.toggleDrawer（）；}
onPress={this.toggleDrawer.bind（this）}
name=“md菜单”
样式={颜色：“白色”，边框：15}
/>
标题
this.props.navigation.navigate（“Stuff”）}>
标题
全部的
正文
);
}
}
类扩展了React.Component{
静态导航选项={
头型：{
背景色：“6B52AE”
},
标题：“东西”，
头部颜色：“fff”
};
render（）{
返回(
);
}
}
const FirstActivity_StackNavigator=createStackNavigator({
第一:{
屏幕：屏幕1，
导航选项：（{navigation}）=>({
标题：“演示屏幕1”，
头左：，
头型：{
背景颜色：“FF9800”
},
头部颜色：“fff”
})
}
});
const Screen2_StackNavigator=createStackNavigator({
第二：{
屏幕：屏幕2，
导航选项：（{navigation}）=>({
标题：“演示屏幕2”，
头左：，
头型：{
背景颜色：“FF9800”
},
头部颜色：“fff”
})
}
});
const Screen3_StackNavigator=createStackNavigator({
第三：{
屏幕：屏幕3，
导航选项：（{navigation}）=>({
标题：“演示屏幕3”，
头左：，
头型：{
背景颜色：“FF9800”
},
头部颜色：“fff”
})
}
});
const pawernavigator=createpawernavigator({
屏幕1：{
//头衔
屏幕：FirstActivity_StackNavigator，
导航选项：{
抽屉标签：“演示屏幕1”
}
}
});
const RootStack=createStackNavigator(
{
主页：主屏幕，
东西：东西
},
{
初始路由名称：“主页”
}
);
const-AppContainer=createAppContainer（根堆栈，抽屉驱动程序）；
导出默认类App扩展React.Component{
render（）{
返回；
}
}
从“反应导航抽屉”导入{DrawerActions}；
render（）{
const{navigationProps}=this.props
返回(
...
navigationProps.dispatch（DrawerActions.toggleDrawer（））}
name=“md菜单”
样式={颜色：“白色”，边框：15}
/>
导航，然后调用调度（DrawerActions.toggleDrawer（））
感谢您的响应，我已经尝试过了，现在我得到了这个错误-未定义不是对象（评估“navigationProps.dispatch”）你能试试this.props.navigation.dispatch（DrawerActions.toggleDrawer（））
吗？如果我在onPress事件中运行console.log（this.props.navigation.dispatch（DrawerActions））
它会返回falsethis.props.navigation.dispatch（drawer.openDrawer（））
也没有什么作用我想问题是我正在导出2个导航-const-AppContainer=createAppContainer（RootStack，DrawerNavigator）；
我想问题是我正在导出2个导航的const-AppContainer=createAppContainer（RootStack，DrawerNavigator）；
如果我从appContainer中删除根堆栈，我可以手动将侧栏菜单拖出，即使它中断了其他导航。const-appContainer=createAppContainer（Rootstack，DrawerNavigator）；
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 />;
}
}