具有React Native的Android独立菜单按钮

Question

I need to make a standalone (without additional bars or else) menu button in my React Native (v 0.47.2) Android app:

On touch it has to open side menu:

Which component I need to use?

Answer 1

You are using react-navigation . Use the StackNavigator . The StackNavigator can set Headers . In the Header , there is a prop to which you can pass an Icon (or any Component ). Here an example:

// 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} />,
        }),
    },

The headerLeft (or headerRight ) can be used for you case ( Documentation) . Here I pass <MenuButton /> component. You can set the color of the StackNavigator s Header to the backgroundColor of your app, or transparent . That way, there won`t be anything visible, but the menu button.

Of yourse you would need to stack you StackNavigator in a DrawerNavigator for the onPress={() => navigate("DrawerOpen")} to work. In the DrawerNavigator you can use a contentComponent which you pass your custom component, that contains your menu.

Here is a more complex setup http://rationalappdev.com/cross-platform-navigation-in-react-native/