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

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

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

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

Q&A

0回答

1490閲覧

[React Native][native-base]ドロワーがスワイプバックする際に表示されてしまう

sabx

総合スコア200

React Native

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

0グッド

0クリップ

投稿2019/07/18 20:14

聞きたいこと

ReactNativeのライブラリーであるnative-base、react-native-router-fluxを用いて、ドロワー付きのモバイルアプリを開発しています。
ただ、ページをスワイプバックする際に、下のgifのように左側に隠れているドロワーが見えてしまう事象に遭遇しています。

https://gyazo.com/a9109844199bae04f898431edbeaddbc

コード

  • App.js
import React, {Component} from 'react'; import { Router, Scene } from 'react-native-router-flux'; import TopScreen from './src/screens/TopScreen'; import UserScreen from './src/screens/UserScreen'; import ConfigScreen from './src/screens/ConfigScreen'; export default class App extends Component { render() { return ( <Router> <Scene key='root'> <Scene key='TopScreen' initial component={TopScreen} hideNavBar={true} /> <Scene key='UserScreen' component={UserScreen} hideNavBar={true} /> <Scene key='ConfigScreen' component={ConfigScreen} hideNavBar={true}/> </Scene> </Router> ); } }
  • TopScreen
import React, {Component} from 'react'; import { Text, TouchableOpacity } from 'react-native'; import { Drawer, Header, Icon, Left, Right } from "native-base"; import { Actions } from 'react-native-router-flux'; import SidebarComponent from '../components/SidebarComponent'; export default class TopScreen extends Component { render() { return ( <Drawer ref={(ref) => { this.drawer = ref; }} content={<SidebarComponent navigator={this._navigator} />} openDrawerOffset={0.4} tapToClose={true} onClose={() => this.closeDrawer} onOpen={() => this.openDrawer} styles={{ height: 100 }} > <Header> <Left> <TouchableOpacity onPress={this.openDrawer.bind(this)}> <Icon name='menu' /> </TouchableOpacity> </Left> <Right> <TouchableOpacity onPress={Actions.ConfigScreen}> <Icon name='ios-book' /> </TouchableOpacity> </Right> </Header> <Text>TopScreen</Text> </Drawer> ); } }
  • UserScreen とTopScreenとの際はクラス名のみなので割愛
  • SidebarContainer
import React, {Component} from 'react'; import { Text } from 'react-native'; import { Container, Header, Content, ListItem } from 'native-base'; import { Actions } from 'react-native-router-flux'; export default class SidebarContainer extends Component { render() { return ( <Container> <Header> <Text>Sidebar</Text> </Header> <Content> <ListItem button onPress={Actions.TopScreen} > <Text>TopScreen</Text> </ListItem> <ListItem button onPress={Actions.UserScreen} > <Text>UserScreen</Text> </ListItem> <ListItem button onPress={Actions.ConfigScreen} > <Text>ConfigScreen</Text> </ListItem> </Content> </Container> ) } }

試してみたこと

  • 下記リファレンスをもとに、Drawerの場所をleftからrightに変更

当然のごとく、ドロワーを開くときも右側から出てくるようになってしまった。

https://docs.nativebase.io/Components.html#ref-components-headref

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問