質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

795閲覧

Drawer Navigatorで不要なヘッダーが表示される(react native)

yamady

総合スコア176

React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2018/05/28 09:40

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;

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

こちらでできました。

JavaScript

1const MainScreenNavigator = StackNavigator({ 2 Home: { screen: Home }, 3 Chat: { screen: Chat } 4}, { 5 haderMode: 'none' 6}); 7 8const MainNavigator = StackNavigator({ 9 MainScreenNavigator: { screen: MainScreenNavigator }, 10 Create: { screen: Create }, 11}, { 12 mode: 'modal' 13}); 14 15const Drawer = DrawerNavigator({ 16 Main: { screen: MainNavigator } 17}, { 18 contentComponent: DrawerMenu, 19 drawerWidth: 240, 20});

投稿2018/05/30 23:14

yamady

総合スコア176

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問