导航在抽屉​​导航 V3 中的自定义抽屉组件中不起作用（反应本机）

Question

我已经使用 react-navigation v3 为我的应用程序创建了一个导航抽屉，但是当我尝试自定义我的抽屉时，我遇到了与导航相关的问题。我创建了一个自定义抽屉组件以创建一个完全自定义的抽屉。但是，一旦我尝试提供 "this.props.navigation" 或我的 "navigateToScreen()" 方法之类的导航功能，它就不会移动到另一个屏幕，也不会生成任何错误，这让我难以调试代码。这是我的代码以获取更多详细信息。我已经为这个问题做了很多搜索，但没有得到正确的答案。

这是我的 Drawer.js 文件

import React, { Component } from "react";

import { createDrawerNavigator, createAppContainer} from "react-navigation";


import Home from '../screens/Home';
import DrawerComponent from '../components/DrawerComponent';


class DrawerMenu extends Component{
  render(){
    return(
      <MyApp/>
    )
  }
}

const MyDrawerNavigator = createDrawerNavigator(
  {
  Home: { screen: Home }
  },
{  
  contentComponent:  DrawerComponent
});

const MyApp = createAppContainer(MyDrawerNavigator);


export default DrawerMenu;

这是我的 DrawerComponent.js 文件

import React, { Component } from "react";
import {
  Text,
  TouchableOpacity,
  View,
  Image,
  ScrollView,
} from "react-native";

import {Icon} from 'native-base';

import {NavigationActions} from "react-navigation";
import { Collapse, CollapseHeader, CollapseBody } from "accordion-collapse-react-native";


class DrawerComponent extends Component{

  navigateToScreen = ( route ) =>(
    () => {
    const navigateAction = NavigationActions.navigate({
        routeName: route
    });
    this.props.navigation.dispatch(navigateAction);
})

  render(){

    return(
        <View style= {{flex: 1}}>
            <View style= {{ height: 180 , backgroundColor: "purple"}}>
            </View>
            <ScrollView>
                <Collapse>
                <CollapseHeader style={styles.menuItem}>
                    <Text style={styles.menuItemText}><Icon  name = "md-qr-scanner"/>        Scan</Text>
                </CollapseHeader>
                <CollapseBody>
                  <ListItem>
                    <TouchableOpacity onPress= {() => this.props.navigation.navigate('Item1')}> 
                    <Text style={styles.menuItemText}>Item 1</Text>
                    </TouchableOpacity>
                  </ListItem>
                  <ListItem>
                  <TouchableOpacity this.navigateToScreen('Item2')> 
                    <Text style={styles.menuItemText}>Item 2</Text>
                    </TouchableOpacity>
                  </ListItem>
                  <ListItem last>
                  <TouchableOpacity> 
                    <Text style={styles.menuItemText}>Item 3</Text>
                    </TouchableOpacity>
                  </ListItem>
                </CollapseBody>
              </Collapse>
              </ScrollView>
            </View>

    )
  }
}


export default DrawerComponent;

关于这个问题的任何建议或回答都会对我有所帮助。谢谢。

Answer 1

您没有命名路线 Item1。检查我的零食。它工作正常。

https://snack.expo.io/@nazrdogan/disrespectful-donuts