【问题标题】:RTL react native drawer issue androidRTL反应原生抽屉问题android
【发布时间】:2018-08-03 22:33:13
【问题描述】:

我正在使用 react native 路由器磁通抽屉并使用 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 />
    );
  }
}

这是我的 routes.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

【问题讨论】:

    标签: android react-native


    【解决方案1】:

    做个测试

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

    【讨论】:

    • 不走运,抽屉图标向左,抽屉从右侧打开,我想要抽屉图标和抽屉都从右侧
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-12-28
    • 2021-07-30
    相关资源
    最近更新 更多