Android 带有 React native 的独立菜单按钮

Question

我需要在我的 React Native (v 0.47.2) Android 应用程序中制作一个独立的（没有额外的栏或其他）菜单按钮：

触摸它必须打开侧面菜单：

我需要使用哪个组件？

Answer 1

您正在使用 react-navigation。使用StackNavigator。 StackNavigator可以设置Headers。在 Header 中，有一个 prop，您可以向其传递 Icon（或任何 Component）。举个例子：

// all your other imports
import Icon from "react-native-vector-icons/Ionicons";
import {
    Platform,
} from "react-native";

const MenuButton = ({ navigate }) => {
    return (
        <Icon
            name={Platform.OS === "ios" ? "ios-menu-outline" : "md-menu"}
            onPress={() => navigate("DrawerOpen")}
        />
    )
}

StackNavigator({
    Notifications: {
        screen: Example,
        navigationOptions: ({ navigation }) => ({
            headerLeft: <MenuButton {...navigation} />,
        }),
    },

headerLeft（或headerRight）可以用于你的情况（Documentation)。这里我传递<MenuButton />组件。你可以设置[的颜色=12=]s Header 到您的应用程序的 backgroundColor，或 transparent。这样，除了菜单按钮之外，不会有任何可见的东西。

你需要将你 StackNavigator 堆叠在 DrawerNavigator 中才能让 onPress={() => navigate("DrawerOpen")} 工作。在 DrawerNavigator 中，您可以使用 contentComponent 来传递您的自定义组件，其中包含您的菜单。

这是一个更复杂的设置 http://rationalappdev.com/cross-platform-navigation-in-react-native/

Android 带有 React native 的独立菜单按钮

Android standalone menu button with React native

android

react-native

menu

react-native-android

android-menu