Question

我正在尝试创建一个抽屉式导航器，我相信我所做的一切都正确，但是当我尝试打开未定义的抽屉不是对象（评估'_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/此处在线运行代码

Answer 1

navigation.navigate('DrawerToggle')已在v2中删除。您可以使用

this.props.navigation.openDrawer();
this.props.navigation.closeDrawer();

分别打开和关闭抽屉。请参阅https://reactnavigation.org/docs/en/drawer-based-navigation.html

React Native Drawer Navigator道具未定义

如何复制

您的环境

1 个答案: