RTL и LTR Drawer Навигация переключения между ними в зависимости от языка пользователя

Question

Как добавить динамическую навигацию по выдвижным ящикам, которая изменяется с 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/>

        );
      }
    }

навигация

            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'
                }

            })

________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________ ________________________________________________________________________________________________________________________________________________________________

Answer 1

Я решил эту проблему с помощью I18nManager! Работает отлично. В моем приложении 2 кнопки, каждая из которых указывает на определенный язык, одна из которых - персидская, для которой требуется приложение, чтобы стать RTL, и одна из них - английская, которая должна быть LTR. всякий раз, когда пользователь нажимает каждую из этих кнопок, вызывается следующая функция:

 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()
}

пакет RNRestart предназначен для перезапуска приложения, и вы должны установить его с помощью следующей команды:

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

аргумент "lang" - это строка, которую я передаю этой функции при каждом нажатии одной из языковых кнопок. например, я передаю «fa» при нажатии персидской кнопки, я передаю «en» при нажатии английской кнопки. поэтому с кодом выше я меняю состояние I18nManager.isRTL. Затем я отредактировал положение ящика, как показано ниже:

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

надеюсь, это поможет любому, кто ищет ответ.