javascript - 打开标题按钮上的导航抽屉单击
问题描述
当我向右滑动我的抽屉打开但我想使用标题中的按钮打开它时我做了一个代码但我有这个错误 undefined is not a object (evaluating 'navigation.openDrawer') 那是我的 app.js 代码:
import {createStackNavigator} from 'react-navigation-stack';
import { createAppContainer } from 'react-navigation';
import Home from './components/login'
import Inscription from './components/inscription'
import signup from './components/signup'
import mp from './components/motdepasse'
import ch from './components/choice'
import mn from './components/menu1'
import drawer from './components/drawerapp'
import React, { Component } from 'react';
import { Image, StyleSheet, Text, TouchableOpacity, } from 'react-native';
import Icon from 'react-native-vector-icons/Entypo'
const Navigator = createStackNavigator({
Home:{screen: Home},
Profil:{screen: Inscription},
signup:{screen: signup, navigationOptions: { header: null }},
mp:{screen: mp},
ch:{screen: ch},
mn:{screen: mn},
drawer:{screen: drawer,navigationOptions: { title:"votre travail",
headerStyle:{backgroundColor:'#8B0000'},
headerTitleStyle: {
fontWeight: 'bold',
color:'white',
},
headerLeft: ({ navigation }) => (
<TouchableOpacity onPress={() => navigation.openDrawer()} >
<Icon name={'menu'} size={28} color={'white'} style={{marginRight:10}}/>
</TouchableOpacity>
),}},
}
);
const App = createAppContainer(Navigator);
export default App;
那是我的appdrawer代码:
function CustomDrawerContent(props) {
return (
<DrawerContentScrollView {...props}>
<DrawerItemList {...props} />
<DrawerItem label="Help" onPress={() => alert('Link to help')} />
<DrawerItem
label="Close drawer"
onPress={() => props.navigation.closeDrawer()}
/>
</DrawerContentScrollView>
);
}
const Drawer = createDrawerNavigator();
function MyDrawer() {
return (
<Drawer.Navigator drawerContent={props => CustomDrawerContent(props)}>
<Drawer.Screen name="Feed" component={mn} />
<Drawer.Screen name="Article" component={Article} />
</Drawer.Navigator>
);
}
export default class drawerapp extends React.Component {
render(){
const {navigate} = this.props.navigation;
return (
<NavigationContainer>
<MyDrawer />
</NavigationContainer>
);
}}
我的工作非常好,直到我单击左侧标题按钮并出现错误
解决方案
您将导航道具放在错误的位置,headerLeft 没有提供导航道具,因此您必须从 navigationOptions 中获取它...
更改导航器代码如下..
const Navigator = createStackNavigator({
Home:{screen: Home},
Profil:{screen: Inscription},
signup:{screen: signup, navigationOptions: { header: null }},
mp:{screen: mp},
ch:{screen: ch},
mn:{screen: mn},
drawer:{screen: drawer,
navigationOptions: ({navigation}) => ({
title:"votre travail",
headerStyle:{backgroundColor:'#8B0000'},
headerTitleStyle: {
fontWeight: 'bold',
color:'white',
},
headerLeft: () => (
<TouchableOpacity onPress={() => navigation.openDrawer()} >
<Icon name={'menu'} size={28} color={'white'} style={{marginRight:10}}/>
</TouchableOpacity>
),
}),
},
});
推荐阅读
- c - 使用C中的指针从int变量访问字符
- python - 如何在 Python 中提取 Url 字符串中的路径?
- swift - 设置连续轮选择器 - SwiftUI
- python - 如何重新获取 Colaboratory 中仍在运行的功能的代码?
- javascript - 如何将移动响应式垂直堆栈菜单转换为汉堡式响应式菜单?
- javascript - 两个组件可以具有完全相同的状态,异步更新吗?
- python - 为什么在 google colab 上训练的模型权重不能像在 colab 中那样在本地执行
- python - “权限不足:请求的身份验证范围不足”即使是最一般的范围
- python - Python 3 Tkinker 文本框:“IndentationError:意外缩进”每当我向结果文本框添加新文本时
- python - 是否可以为 PySequence_Fast 循环只调用一次 PyObject_CallMethod ?