为什么React Native在createStackNavigator中寻找组件

时间:2019-01-16 11:23:13

标签: react-native-navigation

我正在尝试在应用程序中设置一个本机抽屉。

我正在尝试设置抽屉式导航,并且似乎不推荐使用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中看到的内容中显示一个抽屉,并且在该应用中也没有任何显示。

0 个答案:

没有答案