Question

我有这个导航抽屉，当从渲染方法中单击按钮时，它工作得很好，但是当从navigationOptions中单击 Hamburger Icon 时，如何打开它。看到几个网站，但似乎无济于事。

局部工作博览会演示-> App Demo

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作为另一个堆栈，则直接将Header作为Home render()中的自定义组件。

希望有帮助。快乐编码：）

在反应导航中单击“汉堡包”图标时无法打开抽屉

1 个答案: