react-native - 当我点击图标时打开抽屉反应导航版本 5
问题描述
当我单击 headerLeft 部分中的图标时,我想打开抽屉,我也尝试过 this.props.navigation.dispatch 但也给出错误 navigation.dispatch 给出错误
下面的代码没有给出错误,但没有打开抽屉
import { DrawerActions } from '@react-navigation/native';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { createStackNavigator } from '@react-navigation/stack';
const Drawer = createDrawerNavigator();
const Stack = createStackNavigator();
export default class App extends Component {
createHomeStack = () =>
<Stack.Navigator>
<Stack.Screen
initialRouteName="login"
headerMode="screen"
name="main"
children={ this.createBottomTabs}
options={{
title: "Fitbit",
headerLeft: () => (
<Icon
name="menu"
size={25}
color="#D4AF37"
onPress={() => {DrawerActions.openDrawer() }}
/>
)} } />
</Stack.Navigator>
createDrawer = ({navigation}) =>
<Drawer.Navigator initialRouteName="Main" >
<Drawer.Screen name="Main" component={Main} />
<Drawer.Screen name="Contacts" component={Food} />>
</Drawer.Navigator>
render() {
return (
<NavigationContainer>
{this.createHomeStack()}
</NavigationContainer>
);
}
}
解决方案
为了实现这一点,您需要按照文档所述将堆栈包装到抽屉中。
我可能会使用这样的东西:
编辑: 添加完整代码
import React,{Component} from 'react'
import { NavigationContainer } from '@react-navigation/native'
import { createDrawerNavigator } from '@react-navigation/drawer'
import { createStackNavigator } from '@react-navigation/stack'
import { View } from 'react-native'
import Icon from 'react-native-vector-icons/dist/Feather'
const Drawer = createDrawerNavigator()
const Stack = createStackNavigator()
const Main = () => <View></View>
const Food = () => <View></View>
const Home = ({ navigation }) => (
<Stack.Navigator>
<Stack.Screen name="Main" component={Main} options={{
headerLeft: () => <Icon
name="menu"
size={25}
color="#D4AF37"
onPress={() => navigation.openDrawer()}
/>
}} />
</Stack.Navigator>
)
const DrawerNavigator = () => (
<Drawer.Navigator initialRouteName="Home">
<Drawer.Screen name="Home" component={Home} />
<Drawer.Screen name="Contacts" component={Food} />
</Drawer.Navigator>
)
export default props => (
<NavigationContainer>
<DrawerNavigator />
</NavigationContainer>
)
推荐阅读
- swift - 如何停止返回导致“void函数中出现意外的非void返回值”?
- asp.net - 将 ASP.NET 应用程序和 SQL 数据库部署到 AZURE 后出错:与网络相关或特定于实例的错误
- wordpress - 在 WordPress 网站上创建多级/多级导航菜单
- java - 使 DynamicUpdate 与 session.update 一起工作
- javascript - 如何加载多行文本,对其进行编辑,然后像在 eval() 中一样作为 javascript 运行?
- html - 当我更改顶部字段时,我的联系人字段不执行任何操作
- ios - iMessage 贴在短信气泡上时太小
- xml - 如何在 VS 上的 Xamarin 中的 XAML 代码页中获取网格
- python - 使用 Tkinter 显示图像时出错
- machine-learning - 使用分类数据作为特征/目标而不对其进行编码