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

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

希望它能帮助任何寻找答案的人。