TypeError: undefined 不是使用 navigation.openDrawer() 时得到的对象 [英] TypeError: undefined is not an object gotten when using navigation.openDrawer()
本文介绍了TypeError: undefined 不是使用 navigation.openDrawer() 时得到的对象的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
尝试使用 navigation.openDrawer() 打开我的 sidedrawer 组件时，出现此错误.我尝试将抽屉组件嵌套在 NavigationCOntainer 中，但没有用预期的行为是侧抽屉在单击图标时滑入
HomeStack.js
import 'react-native-gesture-handler';从反应"导入反应；从@react-navigation/native"导入 {NavigationContainer}；从@react-navigation/stack"导入 {createStackNavigator}；从 '../login/login' 导入登录；从'../register/register'导入注册；从'../welcome/welcome'导入欢迎；从'../register/resetpwd'导入ResetPWD；从 '../register/registerlogin' 导入 RegisterLogin；从../screens/about"导入关于；从../screens/more"导入更多；从../screens/gallery"导入图库；从 '../screens/excos' 导入 Excos；从 '../screens/abuladwebsite' 导入 AbuladWebsite；从 '../screens/lifeinabu' 导入 LifeInAbu；从 'react-native-elements' 导入 {Icon}；//从 '../routes/sideStack' 导入 SideStack;从@react-navigation/drawer"导入 {createDrawerNavigator}；const Stack = createStackNavigator();const Drawer = createDrawerNavigator();功能 sideDrawer({导航}) {返回 (<抽屉导航器><Drawer.Screen name="画廊"组件={画廊}/><Drawer.Screen name="Life in ABU" component={LifeInAbu}/><Drawer.Screen name="Buy and Sell"组件={AbuladWebsite}/><Drawer.Screen name="About" component={About}/><Drawer.Screen name="Excos" component={Excos}/><Drawer.Screen name="More" component={More}/></Drawer.Navigator>);}功能主页堆栈({导航}){返回 (<导航容器><Stack.Navigator><堆栈屏幕名称=登录"组件={登录}options={{headerShown: false}}/><堆栈屏幕名称=注册"组件={注册}options={{headerShown: false}}/><堆栈屏幕名称=重置密码"组件={ResetPWD}options={{headerShown: false}}/><堆栈屏幕名称="注册登录"组件={注册登录}options={{headerShown: false}}/><Stack.Screen name="sideStack" component={sideDrawer}/><堆栈屏幕名称=欢迎"组件={欢迎}选项={{title: '阿布拉德',headerLeft: () =>(<图标名称=机器人"onPress={() =>导航.openDrawer()}//标题="信息"颜色="#000"/>),}}/></Stack.Navigator></NavigationContainer>);}导出默认的homeStack；App.js
<预><代码>从反应"导入反应，{组件}；从 'react-native-splash-screen' 导入 SplashScreen；从 './src/components/routes/homeStack' 导入 HomeStack；从 './src/components/routes/sideStack' 导入 SideStack；类 App 扩展组件 {componentDidMount() {SplashScreen.hide();}使成为() {返回 解决方案
为了使用 openDrawer() 你需要将你的 stack navigator 包裹在 drawer navigator 中你可以做这样的事情:
import 'react-native-gesture-handler';从反应"导入反应；从@react-navigation/native"导入 {NavigationContainer}；从@react-navigation/stack"导入 {createStackNavigator}；从 '../login/login' 导入登录；从'../register/register'导入注册；从'../welcome/welcome'导入欢迎；从'../register/resetpwd'导入ResetPWD；从 '../register/registerlogin' 导入 RegisterLogin；从../screens/about"导入关于；从'../screens/more'导入更多；从../screens/gallery"导入图库；从 '../screens/excos' 导入 Excos；从 '../screens/abuladwebsite' 导入 AbuladWebsite；从 '../screens/lifeinabu' 导入 LifeInAbu；从 'react-native-elements' 导入 {Icon}；//从 '../routes/sideStack' 导入 SideStack;从@react-navigation/drawer"导入 {createDrawerNavigator}；const Stack = createStackNavigator();const Drawer = createDrawerNavigator();功能 sideDrawer({导航}) {返回 (<导航容器><抽屉导航器><Drawer.Screen name="Home" component={homeStack}/><Drawer.Screen name="画廊"组件={画廊}/><Drawer.Screen name="Life in ABU" component={LifeInAbu}/><Drawer.Screen name="Buy and Sell"组件={AbuladWebsite}/><Drawer.Screen name="About" component={About}/><Drawer.Screen name="Excos" component={Excos}/><Drawer.Screen name="More" component={More}/></Drawer.Navigator></NavigationContainer>);}功能主页堆栈({导航}){返回 (<Stack.Navigator><Stack.Navigator><堆栈屏幕名称=欢迎"组件={欢迎}选项={{title: '阿布拉德',headerLeft: () =>(<图标名称=机器人"onPress={() =>导航.openDrawer()}//标题="信息"颜色="#000"/>),}}/><堆栈屏幕名称=登录"组件={登录}options={{headerShown: false}}/><堆栈屏幕名称=注册"组件={注册}options={{headerShown: false}}/><堆栈屏幕名称=重置密码"组件={ResetPWD}options={{headerShown: false}}/><堆栈屏幕名称="注册登录"组件={注册登录}options={{headerShown: false}}/><Stack.Screen name="sideStack" component={sideDrawer}/></Stack.Navigator>);}导出默认 sideDrawer；希望这会有所帮助！
On trying to open my sidedrawer component using navigation.openDrawer(), I get this error.
I have tried nesting the drawer component within the NavigationCOntainer which didn't work
the expected behavior is for the sidedrawer to slide in on clicking the icon
HomeStack.js
import 'react-native-gesture-handler';
import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import Login from '../login/login';
import Register from '../register/register';
import Welcome from '../welcome/welcome';
import ResetPWD from '../register/resetpwd';
import RegisterLogin from '../register/registerlogin';
import About from '../screens/about';
import More from '../screens/more';
import Gallery from '../screens/gallery';
import Excos from '../screens/excos';
import AbuladWebsite from '../screens/abuladwebsite';
import LifeInAbu from '../screens/lifeinabu';
import {Icon} from 'react-native-elements';
// import SideStack from '../routes/sideStack';
import {createDrawerNavigator} from '@react-navigation/drawer';
const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();
function sideDrawer({navigation}) {
return (
<Drawer.Navigator>
<Drawer.Screen name="Gallery" component={Gallery} />
<Drawer.Screen name="Life in ABU" component={LifeInAbu} />
<Drawer.Screen name="Buy and Sell" component={AbuladWebsite} />
<Drawer.Screen name="About" component={About} />
<Drawer.Screen name="Excos" component={Excos} />
<Drawer.Screen name="More" component={More} />
</Drawer.Navigator>
);
}
function homeStack({navigation}) {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Login"
component={Login}
options={{headerShown: false}}
/>
<Stack.Screen
name="Register"
component={Register}
options={{headerShown: false}}
/>
<Stack.Screen
name="ResetPWD"
component={ResetPWD}
options={{headerShown: false}}
/>
<Stack.Screen
name="RegisterLogin"
component={RegisterLogin}
options={{headerShown: false}}
/>
<Stack.Screen name="sideStack" component={sideDrawer} />
<Stack.Screen
name="Welcome"
component={Welcome}
options={{
title: 'Abulad',
headerLeft: () => (
<Icon
name="android"
onPress={() => navigation.openDrawer()}
// title="Info"
color="#000"
/>
),
}}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
export default homeStack;
App.js
import React, {Component} from 'react';
import SplashScreen from 'react-native-splash-screen';
import HomeStack from './src/components/routes/homeStack';
import SideStack from './src/components/routes/sideStack';
class App extends Component {
componentDidMount() {
SplashScreen.hide();
}
render() {
return <HomeStack />;
}
}
export default App;
解决方案
In order to use openDrawer() you need to wrap your stack navigator inside drawer navigator you can do some thing like this:
import 'react-native-gesture-handler';
import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import Login from '../login/login';
import Register from '../register/register';
import Welcome from '../welcome/welcome';
import ResetPWD from '../register/resetpwd';
import RegisterLogin from '../register/registerlogin';
import About from '../screens/about';
import More from '../screens/more';
import Gallery from '../screens/gallery';
import Excos from '../screens/excos';
import AbuladWebsite from '../screens/abuladwebsite';
import LifeInAbu from '../screens/lifeinabu';
import {Icon} from 'react-native-elements';
// import SideStack from '../routes/sideStack';
import {createDrawerNavigator} from '@react-navigation/drawer';
const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();
function sideDrawer({navigation}) {
return (
<NavigationContainer>
<Drawer.Navigator>
<Drawer.Screen name="Home" component={homeStack} />
<Drawer.Screen name="Gallery" component={Gallery} />
<Drawer.Screen name="Life in ABU" component={LifeInAbu} />
<Drawer.Screen name="Buy and Sell" component={AbuladWebsite} />
<Drawer.Screen name="About" component={About} />
<Drawer.Screen name="Excos" component={Excos} />
<Drawer.Screen name="More" component={More} />
</Drawer.Navigator>
</NavigationContainer>
);
}
function homeStack({navigation}) {
return (
<Stack.Navigator>
<Stack.Navigator>
<Stack.Screen
name="Welcome"
component={Welcome}
options={{
title: 'Abulad',
headerLeft: () => (
<Icon
name="android"
onPress={() => navigation.openDrawer()}
// title="Info"
color="#000"
/>
),
}}
/>
<Stack.Screen
name="Login"
component={Login}
options={{headerShown: false}}
/>
<Stack.Screen
name="Register"
component={Register}
options={{headerShown: false}}
/>
<Stack.Screen
name="ResetPWD"
component={ResetPWD}
options={{headerShown: false}}
/>
<Stack.Screen
name="RegisterLogin"
component={RegisterLogin}
options={{headerShown: false}}
/>
<Stack.Screen name="sideStack" component={sideDrawer} />
</Stack.Navigator>
);
}
export default sideDrawer;
Hope this helps!
这篇关于TypeError: undefined 不是使用 navigation.openDrawer() 时得到的对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
