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

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

1 个答案: