我已经使用 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;
有关此问题的任何建议或答案将对我有所帮助。谢谢你。