gpt4 book ai didi

react-native - 当我点击图标时打开抽屉 react 导航版本 5

转载 作者:行者123 更新时间:2023-12-01 21:40:46 27 4
gpt4 key购买 nike

我想在单击 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>

);
}
}

最佳答案

为了实现这一点,您需要按照文档所述将堆栈包装到抽屉中。

Documentation here

我可能会使用这样的东西:

编辑:添加完整代码

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>
)

关于react-native - 当我点击图标时打开抽屉 react 导航版本 5,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61425905/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com