RTL反应本地抽屉问题android

时间:2018-08-03 22:33:13

标签: android react-native

我正在使用React Native Router Flux抽屉,也使用RTL,一切工作正常,但仅在android端出现问题,抽屉从左打开,而在ios抽屉从右打开。所有设置都相同。

这是我的index.js组件

**//index.js**
import {AppRegistry,I18nManager} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

I18nManager.forceRTL(true);`
AppRegistry.registerComponent(appName, () => App);

这是我的app.js组件

//app.js
import React, { Component } from 'react';
import Routes from './routes';

export default class App extends Component {
  render() {
    return (
      <Routes />
    );
  }
}

这是我的route.js组件

//routes.js
import React, { Component } from 'react';
import { Text, View, TouchableOpacity, Image, ScrollView, Dimensions, Platform } from 'react-native';
import Dashboard from './dashboard';
import SideMenu from './sidemenu';

import { Router, Scene, Actions } from 'react-native-router-flux';


const dr = <Image source={require('./img/menu.png')} style={{ height: 20, width: 25, marginBottom: 10 }} />


const menuButton = () => {
    return (
        <TouchableOpacity style={{ justifyContent: 'center', alignItems: 'center', alignContent: 'center' }}>
            <Image source={require('./img/navLogo.png')} style={{ height: 40, width: 90, marginBottom: 10 }} />
        </TouchableOpacity>
    )
}

class Routes extends Component {
    render() {
        return (
            <Router>
                <Scene key="root" hideNavBar>
                    <Scene key="drawer" drawer
                        renderTitle={menuButton}
                        contentComponent={SideMenu}
                        drawerIcon={dr}
                        drawerWidth={300}
                        navigationBarStyle={{ backgroundColor: '#34871f' }}
                        titleStyle={{ color: '#fff', alignSelf: 'center', textAlign: 'center' }}
                    >
                        <Scene key="main">
                            <Scene key="dashboard" component={Dashboard} title="Dashboard" />
                        </Scene>
                    </Scene>
                </Scene>
            </Router>
        );
    }
}


const styles = {
    navLogo: {
        height: 10,
        width: 10
    },
    menu: {
        height: 10,
        width: 10
    }
}

export default Routes;

这里的任何可以帮助我的专家

这是屏幕截图

enter image description here

1 个答案:

答案 0 :(得分:0)

进行测试

<Scene key="drawer" 
     drawer
     drawerPosition='right'   // <=  Add this line
     ...
>