Навигация не работает в пользовательском компоненте ящика в Drawer Navigation V3

Question

Я создал навигационный ящик для своего приложения с использованием response-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