RTL和LTR抽屉根据用户语言在它们之间进行导航切换
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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/>
);
}
}
导航
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'
}
})
________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________ ________________________________________________________________________________________________________________________________________________________________
我通过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
})
希望它能帮助任何寻找答案的人。
以上是关于RTL和LTR抽屉根据用户语言在它们之间进行导航切换的主要内容，如果未能解决你的问题，请参考以下文章
React-native 支持 RTL 和 LTR，无需更改设备语言