React-Navigation V3 で React-Native を使用しています
DrawerNavigator と StackNavigator に使用しているコードは次のとおりです
import React from "react";
import { StyleSheet, TouchableOpacity } from "react-native";
import { createStackNavigator, createDrawerNavigator } from "react-navigation";
import MaterialIcon from "react-native-vector-icons/MaterialIcons";
import FontAwesome5Icon from "react-native-vector-icons/FontAwesome5";
import Home from "../Home";
import Profile from "../Profile";
import DrawerContainer from "../common/DrawerContainer";
import Colors from "../../helpers/Colors";
const styles = StyleSheet.create({
drawerButton: {
paddingRight: 20,
paddingTop: 4
},
alertButton: {
paddingLeft: 15,
paddingTop: 2
}
});
const DrawerStack = createDrawerNavigator(
{
Home: { screen: Home },
Profile: { screen: Profile }
},
{
// contentComponent: DrawerContainer,
drawerPosition: "right",
drawerWidth: 200
}
);
const drawerButton = navigation => (
<TouchableOpacity onPress={navigation.toggleDrawer}>
<MaterialIcon
name="menu"
size={27}
color="white"
style={styles.drawerButton}
/>
</TouchableOpacity>
);
const AlertButton = () => (
<TouchableOpacity>
<FontAwesome5Icon
name="bell"
size={21}
color="white"
light
style={styles.alertButton}
/>
</TouchableOpacity>
);
const AppStack = createStackNavigator(
{
DrawerStack: { screen: DrawerStack }
},
{
defaultNavigationOptions: ({ navigation }) => ({
headerStyle: { backgroundColor: Colors.primary },
title: "Title",
headerTitleStyle: {
fontFamily: "casual",
marginTop: 5,
textAlign: "left",
flex: 1
},
headerTintColor: "white",
headerLeft: drawerButton(navigation),
headerRight: AlertButton()
})
}
);
export default AppStack;
どういうわけか、引き出しを開いた後に邪魔にならないようにスライドさせようとすると、うまくいかず、スライドジェスチャーで引き出しを開くこともできません。
Android、エミュレーターの Nexus 5、および LG G4 の実際のデバイスでのみテストしました。