具有React Native的Android獨立菜單按鈕

Question

我需要在我的React Native（v 0.47.2）Android應用程序中制作一個獨立的菜單按鈕（沒有其他欄）。

觸摸時必須打開側面菜單：

我需要使用哪個組件？

Answer 1

您正在使用react-navigation 。 使用StackNavigator 。 StackNavigator可以設置Headers 。 在Header ，有一個可以傳遞Icon （或任何Component ）的prop 。 這里是一個例子：

// 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 ）可用於您的案例（ 文檔） 。 在這里，我傳遞了<MenuButton />組件。 您可以將StackNavigator的Header的顏色設置為應用程序的backgroundColor或transparent 。 這樣，除了菜單按鈕之外，什么都看不到。

yourse，你會需要堆你StackNavigator在DrawerNavigator為onPress={() => navigate("DrawerOpen")}工作。 在DrawerNavigator ，可以使用contentComponent ，它傳遞包含菜單的自定義組件。

這是一個更復雜的設置http://rationalappdev.com/cross-platform-navigation-in-react-native/