React NativeのライブラリであるReact Navigationを使って、ドロワーメニューを実装したいと考えています。実装自体はうまくいったのですが、ドロワーを開いた際に不要なヘッダーが一緒に出てきてしまいます。
ドロワーを開いた時のヘッダーを非表示にするにはどうしたらいいでしょうか?
StackOverflow、GitHub issueで指摘されていたのはバージョンによるエラーということでしたが、バージョンは問題ないと思います。
React Native: 0.55.3
React Navigation: 1.5.12
ソースコード
Router.js
JavaScript
1const MainScreenNavigator = StackNavigator({ 2 Home: { screen: Home }, 3 Chat: { screen: Chat } 4}, { 5 haderMode: 'none' 6}); 7 8const MainDrawer = DrawerNavigator( 9 { 10 Main: { screen: MainScreenNavigator } 11 }, 12 { 13 contentComponent: DrawerMenu, 14 drawerWidth: 200 15 } 16); 17 18const MainNavigator = StackNavigator({ 19 MainDrawer: { screen: MainDrawer }, 20 Create: { screen: Create }, 21}, { 22 initialRouteName: 'MainDrawer', 23 mode: 'modal', 24}); 25 26export default MainNavigator;
DrawerButton.js
JavaScript
1export default class DrawerButton extends React.Component { 2 render() { 3 return( 4 <TouchableOpacity 5 style={styles.drawerMenu} 6 onPress={() => this.props.navigation.navigate("DrawerOpen")} 7 > 8 <Icon name="menu" style={{ color: '#fff' }} /> 9 </TouchableOpacity> 10 ); 11 } 12}
DrawerMenu.js
JavaScript
1class DrawerMenu extends React.Component { 2 navigateToScreen = (route) => { 3 const navigateAction = NavigationActions.navigate({ 4 routeName: route 5 }); 6 this.props.navigation.dispatch(navigateAction); 7 } 8 9 render() { 10 return ( 11 <View style={styles.container}> 12 <TouchableOpacity 13 style={styles.menuItem} 14 onPress={this.navigateToScreen('Home', { isStatusBarHidden: false })} 15 > 16 <Text style={styles.menuItemText}>Home</Text> 17 </TouchableOpacity> 18 <TouchableOpacity 19 style={styles.menuItem} 20 onPress={this.navigateToScreen('Chat', { isStatusBarHidden: false })} 21 > 22 <Text style={styles.menuItemText}>Chat</Text> 23 </TouchableOpacity> 24 </View> 25 ); 26 } 27} 28 29export default DrawerMenu;
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。