react-native - 我该如何解决这个问题:'TypeError: undefined is not an object (evalating '_this.props.navigationProps.toggleDrawer')'
问题描述
使用 React-Native 几天后,我试图在我的应用程序中实现一个导航抽屉。TypeError: undefined is not an object (evaluating '_this.props.navigationProps.toggleDrawer')
但是,当我点击TouchableOpacity
应该触发抽屉的组件时,我无法解决错误。
以下是我使用的代码:
页眉.js
import React, { Component } from 'react';
import { View, StyleSheet, Image, TouchableOpacity, Platform } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createDrawerNavigator } from 'react-navigation-drawer';
import { createStackNavigator } from 'react-navigation-stack';
import Screen1 from '../pages/screen1';
import Screen2 from '../pages/screen2';
import Screen3 from '../pages/screen3';
import logo from '../assets/logo.png';
import profileView from '../assets/profileIcon.png';
import menuDots from '../assets/3DotsMenu.png';
import { StatusBarHeight } from '../components/StatusBarHeight';
const statusBarHeight = StatusBarHeight
class Header extends Component {
toggleDrawer = () => {
this.props.navigationProps.toggleDrawer();
};
render() {
return (
<View>
<CreateDrawer />
<View style={styles.header} />
<View style={styles.headerContainer}>
<View style={styles.imageHolder}>
<TouchableOpacity
activeOpacity={0.6}
onPress={this.toggleDrawer.bind(this)}
>
<View>
<Image style={styles.menu} source={menuDots} />
</View>
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.6}>
<View>
<Image style={styles.logo} source={logo} />
</View>
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.6}>
<View>
<Image style={styles.profile} source={profileView} />
</View>
</TouchableOpacity>
</View>
</View>
</View>
);
};
}
const FirstActivity_StackNavigator = createStackNavigator({
First: {
screen: Screen1,
navigationOptions: ({ navigation }) => ({
title: 'Demo Screen 1',
headerLeft: () => <Header navigationProps={navigation} />,
headerStyle: {
backgroundColor: '#FF9800',
},
headerTintColor: '#fff',
}),
},
}
,
{
headerMode: "none"
}
);
const Screen2_StackNavigator = createStackNavigator({
Second: {
screen: Screen2,
navigationOptions: ({ navigation }) => ({
title: 'Demo Screen 2',
headerLeft: () => <Header navigationProps={navigation} />,
headerStyle: {
backgroundColor: '#FF9800',
},
headerTintColor: '#fff',
}),
},
},
{
headerMode: "none"
}
);
const Screen3_StackNavigator = createStackNavigator({
Third: {
screen: Screen3,
navigationOptions: ({ navigation }) => ({
title: 'Demo Screen 3',
headerLeft: () => <Header navigationProps={navigation} />,
headerStyle: {
backgroundColor: '#FF9800',
},
headerTintColor: '#fff',
}),
},
});
const DrawerNavigator = createDrawerNavigator({
Screen1: {
screen: FirstActivity_StackNavigator,
navigationOptions: {
drawerLabel: 'Demo Screen 1',
},
},
Screen2: {
screen: Screen2_StackNavigator,
navigationOptions: {
drawerLabel: 'Demo Screen 2',
},
},
Screen3: {
screen: Screen3_StackNavigator,
navigationOptions: {
drawerLabel: 'Demo Screen 3',
},
},
});
const styles = StyleSheet.create({
header: {
width: '100%',
height: statusBarHeight,
backgroundColor: '#E6E3E2',
flexDirection: 'row',
},
headerContainer: {
height: 60,
backgroundColor: '#E6E3E2',
justifyContent: 'center',
alignItems: 'center'
},
imageHolder: {
flexDirection: "row",
justifyContent: 'space-between',
width: '95%'
},
menu: {
marginTop: 15,
width: 27,
height: 19,
resizeMode: "stretch"
},
logo: {
width: 140,
height: Platform.OS === 'ios' ? 50 : 50,
},
profile: {
marginTop: 3,
height: 38,
width: 35
}
});
const CreateDrawer = createAppContainer(DrawerNavigator);
export default Header;
应用程序.js
import React, { Component } from "react";
import { StyleSheet, Text, View } from "react-native";
import Header from './components/Header';
export default class App extends Component {
render() {
return (
<View style={{flex:1}} >
<View style={{backgroundColor: 'blue'}}>
<Header />
</View>
</View>
);
}
}
解决方案
export default withNavigation(Header);
在导出一堆导航时使用。
推荐阅读
- java - 如何更改我的代码以允许我的回溯命令多次工作?
- reactjs - 尝试使用 fetch 获取图像,图像存储在 firebase 存储中
- c# - 按 DESC ORDER 列出 n 个整数集中 k 个对象的所有总和
- bash - 在后台制作“ssh localhost'sleep 10'”启动命令
- html - 嵌套的 div 不与父级的兄弟姐妹重叠
- sql - Sql想要从表中获取匹配以及新记录
- r - 如何计算以逗号分隔的列中的条目
- javascript - 嵌套对象的引用和值存储在哪里
- python - 如何向量化二维数组和另一个向量之间的操作?
- angular - 角度相同的应用程序中的多个域