React native RTL和LTR抽屉导航根据用户语言在它们之间切换

如何添加从RTL到ltr以及从RTL到ltr的抽屉动态导航。 登录后进入主页面，在主页面上抽屉可以打开，但其位置取决于用户登录时选择的语言

app.js

import React from 'react';
    import TeaApp from './Pages/navigation';


    export default class App extends React.Component {
      constructor(){
        super();
        this.state = {
          name : '',
        };

      }

      render() {
        return (

            <TeaApp/>

        );
      }
    }

从“React”导入React；
从“/Pages/navigation”导入TeaApp；
导出默认类App扩展React.Component{
构造函数（）{
超级（）；
此.state={
名称：“”，
};
}
render（）{
返回(
);
}
}

导航

            import React,{ Component } from 'react';
            import { AsyncStorage, View, Text, Image, StyleSheet, Button, SafeAreaView} from 'react-native';
            import { StackNavigator , SwitchNavigator, DrawerNavigator, DrawerItems,TouchableOpacity} from 'react-navigation';
            import Login from './login';
            import Mainpage from './mainPage';
            import Menu from './menu';
            import CustomizeOrder from './customizeOrder';
            import Intro from './intro';
            import PreviewOrder from './previewOrder';
            import ViewOrder from './viewOrder';

            const INTRO = StackNavigator({ Intro:{screen: Intro} });
            const LOGIN = StackNavigator({ Login:{screen: Login} });

            const REST = StackNavigator({ 
                UserHome:{screen: Mainpage,navigationOptions:({navigation})=>({drawerLockMode:"locked-closed"})},
                Menu:{screen: Menu,navigationOptions:({navigation})=>({drawerLockMode:"locked-closed"})},
                customizeOrder:{screen: CustomizeOrder,navigationOptions:({navigation})=>({drawerLockMode:"locked-closed"})},
                previewOrder:{screen: PreviewOrder,navigationOptions:({navigation})=>({drawerLockMode:"locked-closed"})}, 
                viewOrder:{screen: ViewOrder,navigationOptions:({navigation})=>({drawerLockMode:"locked-closed"})}, 

            });


            const DrawerUserAR = DrawerNavigator(
                {
                    الصفحة_الرئيسية :{screen: REST,navigationOptions:({navigation})=>({drawerLockMode:"locked-closed"})},
                    المطبخ :{screen: KitchenPage},
                    الطلبات:{screen: VIEWORDER},
                    تغيير_كلمة_المرور:{screen: ChangePassword},
                    تغيير_اللغة: {screen: ChangeLanguage}
                    //logout:{}
                },
                {
                    initialRouteName: 'الصفحة_الرئيسية',
                    drawerPosition: 'right',
                    contentComponent:(props) => (
                        <View style={{flex:1}}>
                            <Image
                                style={styles.drawerImage}
                                source={{uri:props.descriptors.الصفحة_الرئيسية.navigation.state.routes[0].params.content.company_logo_small}} />
                            <Text/>
                            <Text style={{textAlign:'center',fontSize:15,marginVertical:15}}>{props.descriptors.الصفحة_الرئيسية.navigation.state.routes[0].params.content.name}</Text>
                            <Text/>
                            <DrawerItems {...props} />
                            <Text/><Text/>
                            <Text/><Text/>
                            <Text/><Text/>
                            <Text/><Text/>
                            <Text/><Text/>
                        </View>),
                    drawerOpenRoute: 'DrawerOpen',
                    drawerCloseRoute: 'DrawerClose',
                    drawerToggleRoute: 'DrawerToggle'
                }
            );

            const DrawerUserEN = DrawerNavigator(
                {
                    Mainpage :{screen: REST,navigationOptions:({navigation})=>({drawerLockMode:"locked-closed"})},
                    Kitchen :{screen: KitchenPage},
                    viewOrder:{screen: VIEWORDER},
                    changePassword:{screen: ChangePassword},
                    changeLanguage: {screen: ChangeLanguage}
                    //logout:{}
                },
                {
                    initialRouteName: 'Mainpage',
                    drawerPosition: 'left',
                    contentComponent:(props) => 
                        (
                        <View style={{flex:1}}>
                            <Image
                                style={styles.drawerImage}
                                source={{uri:props.descriptors.Mainpage.navigation.state.routes[0].params.content.company_logo_small}} />
                            <Text/>
                            <Text style={{textAlign:'center',fontSize:15,marginVertical:15}}>{props.descriptors.Mainpage.navigation.state.routes[0].params.content.name}</Text>
                            <Text/>
                            <DrawerItems {...props} />
                            <Text/><Text/>
                            <Text/><Text/>
                            <Text/><Text/>

                        </View>),
                    drawerOpenRoute: 'DrawerOpen',
                    drawerCloseRoute: 'DrawerClose',
                    drawerToggleRoute: 'DrawerToggle'
                }
            );

            export default SwitchNavigator(
                {
                    intro:{screen: INTRO},
                    login:{screen: LOGIN},
                    rest:{screen: REST},
                    rest:{screen: /*drawer depending on the language that will get it from login*/},
                },
                {
                    initialRouteName: 'intro'
                }
            );


            const styles = StyleSheet.create({

                container: {
                flex: 1,
                justifyContent: 'center',
                alignItems: 'center'
                },
                drawerHeader: {
                height: 200,
                backgroundColor: 'white'
                },
                drawerImage: {
                marginTop: 20,
                height: 150,
                width: 150,
                borderRadius: 75,
                alignSelf:'center'
                }

            })

import React，{Component}来自'React'；
从“react native”导入{AsyncStorage，View，Text，Image，StyleSheet，Button，SafeAreaView}；
从“react navigation”导入{StackNavigator、SwitchNavigator、DrumerNavigator、DrumerItems、TouchableOpacity}；
从“./Login”导入登录名；
从“/Mainpage”导入主页面；
从“./菜单”导入菜单；
从“./CustomizeOrder”导入CustomizeOrder；
从“/Intro”导入简介；
从“/PreviewOrder”导入PreviewOrder；
从“/ViewOrder”导入ViewOrder；
const INTRO=StackNavigator（{INTRO:{screen:INTRO}}）；
const LOGIN=StackNavigator（{LOGIN:{screen:LOGIN}}）；
常量REST=StackNavigator（{
用户主页：{屏幕：主页，导航选项：（{navigation}）=>（{drawerLockMode:“锁定关闭”}），
菜单：{屏幕：菜单，导航选项：（{navigation}）=>（{drawerLockMode:“锁定关闭”}），
自定义顺序：{屏幕：自定义顺序，导航选项：（{navigation}）=>（{drawerLockMode:“locked closed”}），
预览者：{屏幕：预览者，导航选项：（{navigation}）=>（{drawerLockMode:“锁定关闭”}），
viewOrder:{screen:viewOrder，导航选项：（{navigation}）=>（{drawerLockMode:“locked closed”}），
});
常数paurerUserar=paurerAvigator(
{
屏幕：休息，导航选项：（{navigation}）=>（{drawerLockMode:“锁定关闭”），
ا㶈㶈㶒{屏幕：厨房页面}，
اغب㶎：{屏幕：视图顺序}，
屏幕：更改密码，
（屏幕：更改语言）
//注销：{}
},
{
姓名首字母RouteName:“姓名首字母”，
抽屉位置：'对'，
contentComponent：（道具）=>(
{props.descriptor.ا㶈㶈㶈㶈㶈㶈㶈㶈㶈㶈㶈㶈㶈㶈.navigation.state.routes[0].params.content.name}
),
DropeRopenRoute:“DropeRopen”，
抽屉关闭路线：“抽屉关闭”，
抽屉勾选：“抽屉勾选”
}
);
常数paurerUseren=抽屉驱动程序(
{
主页：{screen:REST，导航选项：（{navigation}）=>（{drawerLockMode:“locked closed”}），
厨房：{屏幕：KitchenPage}，
viewOrder:{屏幕：viewOrder}，
更改密码：{屏幕：更改密码}，
changeLanguage:{屏幕：changeLanguage}
//注销：{}
},
{
initialRouteName:“主页”，
抽屉位置：'左'，
contentComponent：（道具）=>
(
{props.descriptor.Mainpage.navigation.state.routes[0].params.content.name}
),
DropeRopenRoute:“DropeRopen”，
抽屉关闭路线：“抽屉关闭”，
抽屉勾选：“抽屉勾选”
}
);
导出默认的SwitchNavigator(
{
简介：{屏幕：简介}，
登录：{屏幕：登录}，
rest:{screen:rest}，
rest:{screen://*抽屉，具体取决于登录时使用的语言*/}，
},
{
initialRouteName:“简介”
}
);
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“中心”
},
抽屉阅读器：{
身高：200，
背景颜色：“白色”
},
付款人：{
玛金托普：20，
身高：150，
宽度：150，
边界半径：75，
alignSelf:“中心”
}
})

________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

 import {I18nManager} from 'react-native'
 import RNRestart from 'react-native-restart';

 async changeAppLang(lang) {

    if(lang == 'fa') {
        if (!I18nManager.isRTL) {
            await I18nManager.forceRTL(true);
          }
    } else {
        if (I18nManager.isRTL) {
            await I18nManager.forceRTL(false);
          }
    }
    RNRestart.Restart()
}

npm install react-native-restart --save
react-native link react-native-restart

import {I18nManager} from 'react-native';
const drawer = createDrawerNavigator({
  Main: Main
}, {
     drawerPosition: I18nManager.isRTL ?'right':'left',
     contentComponent: DrawerMenu
})