reactjs - react native - 如何根据应用程序语言更改抽屉位置？

Question

我正在使用本机反应和反应导航进行路由。我有英语和阿拉伯语的应用程序。当用户将英语切换为阿拉伯语时，我正在重新加载应用程序一切正常，只有抽屉位置没有改变。

我的代码是这样的：

export default App extends Component {
componentDidMount(){
AsyncStorage.getItem("lang").then(language => {
if(language == "ar"){
   I18nManager.allowRTL(true);
}
})
}

render(){
   return (
      <AppContainer> </AppContainer>
   )
}
}

const AppNavigator = createDrawerNavigator(
  {
    Home: HomeScreen,
    Profile: ProfileScreen,
  },
  {
    initialRouteName: "Home",
    contentComponent: SideMenuScreen,
    drawerPosition: "left"
  }
);
const AppContainer = createAppContainer(AppNavigator);

如果语言是阿拉伯语，如何将抽屉位置向右更改？

标签： reactjsreact-nativeinternationalizationreact-navigation

Answer 1

你可以尝试这样的事情：

const AppContainer = ({ position }) => {
  const AppSide = createAppContainer(
    createDrawerNavigator(
      {
        Home: HomeScreen,
        Profile: SettingsScreen
      },
      {
        initialRouteName: "Home",
        // contentComponent: SideMenuScreen
        drawerPosition: position
      }
    )
  );

  return <AppSide />;
};

export default class App extends Component {
  state = {
    position: "left"
  };

  componentDidMount() {
    AsyncStorage.getItem("lang").then(language => {
      if (language == "ar") {
        I18nManager.allowRTL(true);
        this.setState({
          position: "right"
        });
      } else {
        this.setState({
          position: "left"
        });
      }
    });
  }

  render() {
    return <AppContainer position={this.state.position}> </AppContainer>;
  }
}