聞きたいこと
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
あなたの回答
tips
プレビュー