React Native-“未定義不是對象（正在評估'MyApp.navigation.openDrawer'）

Question

我是React Native的初學者，我嘗試制作菜單，但是在調用openDrawer時出現此錯誤：

React Native-“ undefined不是對象（正在評估'MyApp.navigation.openDrawer'）onPress ..Router.js 37:60

這是一個嵌套菜單。

我的Rooter.js：

import React from "react";
import { createStackNavigator, createDrawerNavigator } from "react-navigation";
import {
  Text,
  StyleSheet,
  Image,
  Button,
  TouchableHighlight
} from "react-native";
import Home from "../screens/Home";
import AddAnnounce from "../screens/AddAnnounce";
import Login from "../screens/Login";

const AddAnnounceStack = createStackNavigator({
  AddAnnounce: {
    screen: AddAnnounce
  }
});

const HomeStack = createStackNavigator({
  Home: {
    screen: Home,
    navigationOptions: {
      title: "   ACCUEIL",
      drawerLabel: "Home",
      drawerIcon: ({ tintColor }) => {
        <Image source={require("../icons/home.png")} style={[styles.icon]} />;
      },
      headerStyle: {
        backgroundColor: "#c51626",
        paddingLeft: 20,
        paddingRight: 20
      },
      headerTintColor: "#fff",
      headerTitleStyle: { fontWeight: "bold" },
      headerLeft: (
        <TouchableHighlight onPress={() => MyApp.navigation.openDrawer()}>
          <Image
            style={{ height: 30, width: 30 }}
            source={require("../icons/menu-button.png")}
          />
        </TouchableHighlight>
      ),
      headerRight: (
        <Image
          source={require("../icons/logoMenu.png")}
          style={{ width: 60, height: 50 }}
        />
      )
    }
  }
});

export const MyApp = createDrawerNavigator(
  {
    ACCUEIL: { screen: HomeStack },
    "Déposer une annonce": { screen: AddAnnounceStack }
  },
  { initialRoutName: "Home" }
);

我使用Node 8.11.3

我不知道這個錯誤是從哪里來的。

Answer 1

在您的HomeStack導航器中，通過一個以參數{navigation}為參數並在要使用導航實例的位置使用此參數的函數來替換navigationOptions的類型。

const HomeStack = createStackNavigator({
  Home: {
    screen: Home,
    navigationOptions: ({ navigation }) => ({
      title: "   ACCUEIL",
      drawerLabel: "Home",
      drawerIcon: ({ tintColor }) => {
        <Image source={require("../icons/home.png")} style={[styles.icon]} />;
      },
      headerStyle: {
        backgroundColor: "#c51626",
        paddingLeft: 20,
        paddingRight: 20
      },
      headerTintColor: "#fff",
      headerTitleStyle: { fontWeight: "bold" },
      headerLeft: (
        //replace MyApp.navigation by navigation above...
        <TouchableHighlight onPress={() => navigation.openDrawer()}>
          <Image
            style={{ height: 30, width: 30 }}
            source={require("../icons/menu-button.png")}
          />
        </TouchableHighlight>
      ),
      headerRight: (
        <Image
          source={require("../icons/logoMenu.png")}
          style={{ width: 60, height: 50 }}
        />
      )
    })
  }
});