我正在尝试创建一个抽屉式导航器,我相信我所做的一切都正确,但是当我尝试打开未定义的抽屉不是对象(评估'_this2.props.navigation.navigate')时出现此错误。我做了一些控制台日志,发现即使在注册屏幕之后,每个类(包括App.js中的类)的this.props都是空的。有人可以帮忙还是看看这是不是实际的错误?
预先感谢
App.js
import * as React from 'react';
import { Text, View, StyleSheet, StatusBar, TouchableOpacity } from 'react-native';
import { Constants } from 'expo';
import Map from './screen'
import Home1 from './home';
// You can import from local files
import AssetExample from './components/AssetExample';
import Nav from './nav';
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
import { Ionicons as Icon } from '@expo/vector-icons';
import { createDrawerNavigator, DrawerItems, Navigation } from 'react-navigation';
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
console.log(this.props);
return (
<View style={styles.container}>
<Home1 {...this.props} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: StatusBar.currentHeight,
backgroundColor: '#FFF',
},
innerContainer: { flex: 1, alignItems: 'center', justifyContent: 'center' },
header: { padding: 15, paddingTop: 22 },
});
home.js
import * as React from 'react';
import { Text, View, StyleSheet, StatusBar, TouchableOpacity } from 'react-native';
import { Constants } from 'expo';
import Map from './screen'
// You can import from local files
import AssetExample from './components/AssetExample';
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
import { Ionicons as Icon } from '@expo/vector-icons';
import { DrawerNavigator, DrawerItems, Navigation } from 'react-navigation';
export default class Home1 extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
static navigationOptions = {
drawerLabel: 'Home'
};
render() {
return (
<View style={styles.container}>
<StatusBar barStyle="dark-content" />
<View style={styles.header}>
<TouchableOpacity
onPress={() => {
console.log(this.props);
console.log(this.props.navigation);
this.props.navigation.navigate('DrawerToggle');}}>
<Icon name="md-menu" size={30} />
</TouchableOpacity>
</View>
<Text> 'hi' </Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: StatusBar.currentHeight,
backgroundColor: '#FFF',
},
innerContainer: { flex: 1, alignItems: 'center', justifyContent: 'center' },
header: { padding: 15, paddingTop: 22 },
});
screen.js
import * as React from 'react';
import { Text, View, StyleSheet, StatusBar, TouchableOpacity } from 'react-native';
import { Constants } from 'expo';
// You can import from local files
import AssetExample from './components/AssetExample';
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
import { Ionicons as Icon } from '@expo/vector-icons';
import { DrawerNavigator, DrawerItems, Navigation } from 'react-navigation';
export default class Map extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
static navigationOptions = {
drawerLabel: 'Map'
};
render() {
return (
<View>
<StatusBar barStyle="dark-content" />
<View style={styles.header}>
<TouchableOpacity
onPress={() => {
console.log(this.props);
console.log(this.props.navigation);
this.props.navigation.navigate('DrawerToggle');}}>
<Icon name="md-menu" size={30} />
</TouchableOpacity>
<Text> 'hello' </Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: StatusBar.currentHeight,
backgroundColor: '#FFF',
},
innerContainer: { flex: 1, alignItems: 'center', justifyContent: 'center' },
header: { padding: 15, paddingTop: 22 },
});
nav.js
import * as React from 'react';
import { Text, View, StyleSheet, StatusBar, TouchableOpacity } from 'react-native';
import { Constants } from 'expo';
import Map from './screen'
import Home1 from './home';
// You can import from local files
import AssetExample from './components/AssetExample';
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
import { Ionicons as Icon } from '@expo/vector-icons';
import { createDrawerNavigator, DrawerItems, Navigation } from 'react-navigation';
const Nav = createDrawerNavigator({
Home: {
screen: Home1
},
Map: {
screen: Map
},
});
export default Nav;
“ react-native-paper”:“ 2.1.3”, “反应导航”:“ 2.18.2”
https://snack.expo.io/此处在线运行代码
答案 0 :(得分:0)
navigation.navigate('DrawerToggle')
已在v2中删除。
您可以使用
this.props.navigation.openDrawer();
this.props.navigation.closeDrawer();
分别打开和关闭抽屉。 请参阅https://reactnavigation.org/docs/en/drawer-based-navigation.html