>

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" }
);

노드 8.11.3을 사용합니다

이 실수의 출처를 모르겠습니다.

  • 답변 # 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 }}
            />
          )
        })
      }
    });
    
    

관련 자료

  • 이전 laravel - 전체 랭 파일보기
  • 다음 php - 단일 페이지에서 Concrete5 Express 목록의 네임 스페이스 문제