未定义不是评估0,reactnavigation.createDrawerNavigator的函数

时间:2019-03-05 12:15:21

标签: android react-native react-native-android android-navigation-drawer

我有以下代码

import { createStackNavigator,createAppContainer,DrawerNavigator,createDrawerNavigator, DrawerActions } from 'react-navigation';
    const RootStack = createDrawerNavigator(
      {
        Home: HomeScreen,
        Details: DetailsScreen,
      },
      {
        intialRouteName: 'Home',
        navigationOptions: {
          headerStyle : {
            backgroundColor: '#f4511e',
          },
          headerTintColor: '#fff',
          headerTitleStyle : {
            color: 'white',
          },
        },
      }
    );


    export default class App extends React.Component {
      render() {
        return <RootStack/>;
      }
    }

它总是显示错误

  

未定义不是函数求值   0,reactnavigation.createDrawerNavigator

我尝试了通过网络找到的不同解决方案,但总是遇到相同的错误,看起来像是'react-navigation'的版本问题

“反应导航”:“ 1.0.0-beta.23”

我在react-native的第一天无法获得它。

任何帮助,谢谢

谢谢

1 个答案:

答案 0 :(得分:1)

我这样设置抽屉导航:

制作一个route.js文件,并在其中添加所有这些代码

  

注意:代替componentName添加您的组件名称

import { StackNavigator, createDrawerNavigator } from 'react-navigation';
import DrawerScreen from 'your/drawer/component/path'
import componentName from 'your/component/path/componentName'

const Navigator = StackNavigator({
    componentName: { screen: componentName, navigationOptions: { header:null }}},
{
   mode: 'modal',
   headerMode: 'none',
   initialRouteName: componentName

});

const MyDrawerNavigator = createDrawerNavigator({  Navigator },
  {
      contentComponent:DrawerScreen,
      drawerPosition:"left"
  });

module.exports = MyDrawerNavigator;

然后在您的app.js文件上导入

  

MyDrawerNavigator

像这样

import MyDrawerNavigator from 'path/to/routes.js'

然后在app.js上像这样使用它

export default class App extends Component{
  render() {
    return (
        <MyDrawerNavigator />
    );
  }
}

就这样:)

  

我使用react-navigation版本-> 2.5.5

希望它对您有用。