我正在尝试在应用程序中设置一个本机抽屉。
我正在尝试设置抽屉式导航,并且似乎不推荐使用StackNavigator,因此很难完成抽屉式导航。此外,应用程序没有看到我已导出为组件的组件。
这是应用程序的入口点
import React, {Component} from 'react';
import stackNav from './components/stacknav';
import {AppRegistry,View,Dimensions} from 'react-native';
import { createStackNavigator ,DrawerNavigator,createAppContainer}
from 'react-navigation';
import SideMenu from './components/SideMenu/SideMenu'
const drawernav = createStackNavigator({
Item1: {
screen: stackNav,
}
}, {
contentComponent: SideMenu,
drawerWidth: Dimensions.get('window').width - 120,
});
const AppStack = createAppContainer(drawernav);
export default class App extends React.Component {
render() {
return <AppStack />;
}
}
这是stackNav组件
import React, { Component} from 'react';
import HomeScreen from './HomeScreen';
import TopUpScreen from './TopUpScreen';
import LogoutScreen from './LogoutScreen';
import SideMenu from './SideMenu/SideMenu';
import {createStackNavigator} from 'react-navigation';
import {Platform,StyleSheet,Text,View, TouchableOpacity} from
'react- native';
import IOSIcon from "react-native-vector-icons/Ionicons";
export const stackNav = createStackNavigator({
Home : {
screen: HomeScreen,
navigationOptions: ({navigation}) => ({
title: "Main",
headerLeft:(<TouchableOpacity onPress={() =>
this.props.navigation.openDrawer()}>
<IOSIcon name="ios-menu" size={30} />
</TouchableOpacity>
),
headerStyle: { paddingRight: 10, paddingLeft: 15 }
})
},
TopUp: {
screen: TopUpScreen,
navigationOptions: ({navigation}) => ({
title: "TopUp",
})
}
});
这是用于抽屉导航器的
import React, {Component} from 'react';
import stackNav from './stacknav';
import {AppRegistry,View,Dimensions} from 'react-native';
import { DrawerNavigator,createStackNavigator } from 'react-
navigation';
import SideMenu from './SideMenu/SideMenu'
export const drawernav = DrawerNavigator({
contentComponent: SideMenu,
drawerWidth: Dimensions.get('window').width - 120,
});
我希望该应用在我们在android和ios中看到的内容中显示一个抽屉,并且在该应用中也没有任何显示。