如何解决undefined不是函数（评估'（0 _reactnavigation.stacknavigator）'）

Question

我是本机新手。我昨天才开始从事本机工作。

在react-navigation中使用NativeBase Drawer组件和StackNavigator

在检查了其他问题之后，我仍然不了解解决此问题以及在不同组件之间导航的方法。我只是想在抽屉式导航中打开不同的页面。

App.js

import NavConfig from './config/user/NavConfig';
import React, { Component } from 'react';
import { Container, Header, Title, Content, Footer, FooterTab, Button, Left, Right, Body, Icon, Text, Drawer } from 'native-base';
import AppHeader from './common/AppHeader';
import AppFooter from './common/AppFooter';
import SideBar from './common/SideBar';
import { StackNavigator } from "react-navigation";

export const navigator = StackNavigator(NavConfig.navigation);

export default class App extends Component {
  closeDrawer = () => {
    this.drawer._root.close()
  };
  openDrawer = () => {
    this.drawer._root.open()
  };
  render() {

    return (
      <Drawer
        ref={(ref) => { this.drawer = ref; }}
        content={<SideBar navigator={this.navigator} />}
        onClose={() => this.closeDrawer()} >
        <Container>
          <AppHeader openDrawer={this.openDrawer.bind(this)}/>
          <Content>
            <Text>
              This is Content Section
            </Text>
          </Content>
          <AppFooter />
        </Container>
      </Drawer>

    );
  }
}



NavConfig.js

import Dashboard from "./../../../src/components/User/Dashboard";
import MyNetwork from "./../../../src/components/User/MyNetwork";
import MyOrders from "./../../../src/components/User/MyOrders";
import MyPayouts from "./../../../src/components/User/MyPayouts";
import InviteFriends from "./../../../src/components/User/InviteFriends";
import BankDetails from "./../../../src/components/User/BankDetails";

const NavConfig = {
      navigation: {
          Dashboard: {
            screen: Dashboard
          },
          MyNetwork: {
            screen: MyNetwork,
          },
          MyOrders: {
            screen: MyOrders,
          },
          MyPayouts: {
            screen: MyPayouts,
          },
          InviteFriends: {
            screen: InviteFriends,
          },
          BankDetails: {
            screen: BankDetails,
          }
       }
    }
    export default  NavConfig;


Sidebar.js

import React, { Component } from 'react';
import { Image } from 'react-native';
import styles from "./SideBarStyles";
import Dashboard from '../components/User/Dashboard';
import {
    Content,
    Text,
    List,
    ListItem,
    Icon,
    Container,
    Left,
    Right,
    Badge
  } from "native-base";
const drawerCover = require("../../assets/drawer-cover.png");
const drawerImage = require("../../assets/Novio-Fina-600.png");  
const datas = [
    {
      name: "Dashboard",
      route: "Dashboard",
      icon: "phone-portrait",
      bg: "#C5F442"
    },
    {
      name: "My Orders",
      route: "Header",
      icon: "arrow-up",
      bg: "#477EEA",
      types: "11"
    },
    {
      name: "My Payouts",
      route: "Footer",
      icon: "arrow-down",
      bg: "#DA4437",
      types: "4"
    },
    {
      name: "My Affiliate Network",
      route: "NHAccordion",
      icon: "repeat",
      bg: "#C5F442",
      types: "5"
    },
    {
      name: "Invite Friends",
      route: "Actionsheet",
      icon: "easel",
      bg: "#C5F442",
      types: "9"

    },
    {
      name: "Banking Details",
      route: "NHBadge",
      icon: "notifications",
      bg: "#4DCAE0"
    },
    {
      name: "Logout",
      route: "NHButton",
      icon: "radio-button-off",
      bg: "#1EBC7C",
    }
  ];

export default class SideBar extends Component {
  render() {
    return (
        <Container>
        <Content
          bounces={false}
          style={{ flex: 1, backgroundColor: "#fff", top: -1 }}
        >
          <Image source={drawerCover} style={styles.drawerCover} />
          <Image square style={styles.drawerImage} source={drawerImage} />

          <List
            dataArray={datas}
            renderRow={data =>
              <ListItem
                button
                noBorder
                onPress={() => this.props.navigation.navigate(data.route)}
              >
                <Left>
                  <Icon
                    active
                    name={data.icon}
                    style={{ color: "#777", fontSize: 26, width: 30 }}
                  />
                  <Text style={styles.text}>
                    {data.name}
                  </Text>
                </Left>
                {data.types &&
                  <Right style={{ flex: 1 }}>
                    <Badge
                      style={{
                        borderRadius: 3,
                        height: 25,
                        width: 72,
                        backgroundColor: data.bg
                      }}
                    >
                      <Text
                        style={styles.badgeText}
                      >{`${data.types} Types`}</Text>
                    </Badge>
                  </Right>}
              </ListItem>}
          />
        </Content>
      </Container>
    );
  }
}
module.exports = SideBar;

我通过react-navigation安装了yarn add react-navigation。

Answer 1

您两次导出滑块

export default class Slidebar{
 ...
}
// and at the end
module.exports = Slidebar

因为SideBar未包含在NavConfig.js中。您必须将其与withNavigation绑定
因此，在 Sidebar.js

import {withNavigation} from 'react-navigation' // add this
class SlideBar {
...
...
...
//module.exports = SlideBar;
module.exports = withNavigation(SlideBar);