Невозможно открыть ящик при нажатии на значок гамбургера в реагирующей навигации

Question

У меня есть этот навигационный ящик, который прекрасно работал при нажатии на кнопку из метода рендеринга, но как открывать при нажатии на Значок гамбургера из navigationOptions.Видел несколько веб-сайтов, но ничего не работает.

Демонстрация частичной работы -> Демо приложения

App.js

import React from 'react';
import { View, Text, Button, Animated } from 'react-native';
import { Provider as PaperProvider } from "react-native-paper";
import {
  createAppContainer,
  createStackNavigator,
  createBottomTabNavigator,
} from 'react-navigation'; // Version can be specified in package.json

import theme from "./styles/theme";

import HomeScreen from "./src/Home";
import DetailsScreen from "./src/Details";

const AppNavigator = createStackNavigator(
  {
    Home: {
      screen: HomeScreen,
    },
    Details: {
      screen: DetailsScreen,
    },
  },
  {
    initialRouteName: 'Home',
    defaultNavigationOptions: {
      headerStyle: {
        backgroundColor: '#6B8E23',
      },
      headerTintColor: '#fff',
    }
  }
);

const AppContainer = createAppContainer(AppNavigator);

export default class App extends React.Component {
  render() {
    return (
      <PaperProvider theme={theme}>
        <AppContainer />
      </PaperProvider>
    );
  }
}

Home.js

import React from 'react';
import PropTypes from "prop-types";
import { withTheme  } from "react-native-paper";
import { View, Text, Button, Image } from 'react-native';
import { UIIconButton, UIButton } from "../components/index";
import { createDrawerNavigator, createAppContainer } from "react-navigation";

import BillScreen from "./Bill";
import PaymentScreen from "./Payment";

class HomeScreen extends React.Component {
  static navigationOptions = ({ navigation }) => {
    return {
      headerTitle: "Home",
      headerLeft:
        <UIIconButton
                    icon="menu"
          size={30}
          color="white"
                    onPress={() => navigation.navigate('DrawerToggle')}
                />,
    };
  };

  render() {
    return (
      <HomeApp />
    );
  }  
}

HomeScreen.propTypes = {
    theme: PropTypes.object,
};

const MyDrawerNavigator = createDrawerNavigator({
    Bill: {
        screen: BillScreen,
    },
    Payment: {
        screen: PaymentScreen,
    },
}, {
  initialRouteName: 'Bill',
  contentOptions: {
    activeTintColor: '#e91e63',
  },
  drawerType: "slide"
});

const HomeApp = createAppContainer(MyDrawerNavigator);

export default withTheme(HomeScreen);

Полный исходный код можно найти по вышеуказанной ссылке.

Answer 1

Вы отключили вложение ваших навигаторов.Под этим я подразумеваю, что вы визуализируете свой HomeApp внутри компонента, который является экраном вашего основного стека.Таким образом, в вашем главном стеке нет ни одного экземпляра навигационного объекта ящика, который может переключать ящик.

Отредактировано: navigation объект, который вы получаете от navigationOptions,только для стекового навигатора.

Что вам нужно сделать, так это вставить свой ящик в свой стек и сделать домашний экран первым экраном навигатора.Код должен выглядеть следующим образом:

const AppNavigator = createStackNavigator({
  MyDrawer : {
    screen: MyFancyDrawer,
  },
  Details: {
  screen: DetailsScreen,
  },
},
{
  initialRouteName: 'MyDrawer',
  defaultNavigationOptions: {
    headerStyle: {
      backgroundColor: '#6B8E23',
    },
    headerTintColor: '#fff',
  }
 }
);

, и ваш ящик должен быть:

const MyDrawerNavigator = createDrawerNavigator({
HomeScreen: {
   screen: Home
},
Bill: {
    screen: BillScreen,
},
Payment: {
    screen: PaymentScreen,
},
});

Хотя тогда ваш Дом должен быть сначала сам по себе стеком, поскольку по умолчанию нет headerопция в navigationOption для навигатора.или, если вы не хотите сделать Home еще одним стеком, то создайте свой заголовок как собственный компонент в render() из Home.

Надеюсь, что это поможет.Удачного кодирования:)