I18nManager.forceRTL 不会在首次应用加载时应用更改

IT技术 reactjs react-native
2021-04-30 20:37:06

我有一个由 awesome 创建的应用程序,React-native我的布局设计为处于 RTL 模式。我已经设置了一个选项来强制布局为 RTL,但我的选项在安装后的第一个应用程序加载中不起作用。此功能适用于第二次运行。

我在 index.js 中写了这个选项:

import React, { Component } from 'react';
import { I18nManager } from 'react-native';
import { Provider } from 'react-redux';

I18nManager.forceRTL(true);

class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
          <MainStack />
        </PersistGate>
      </Provider>
    );
  }
}

export default App;
4个回答

我有同样的问题,并通过调用解决它forceRTLMainApplication.javaonCreate方法。

...
import com.facebook.react.modules.i18nmanager.I18nUtil;

...
 @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);

    I18nUtil sharedI18nUtilInstance = I18nUtil.getInstance();
    sharedI18nUtilInstance.forceRTL(this,true);
    sharedI18nUtilInstance.allowRTL(this, true);
  }
...

在IOS上添加 AppDelegate.m

...
NSURL *jsCodeLocation; // this probably already exists!
[[RCTI18nUtil sharedInstance] allowRTL:YES];
[[RCTI18nUtil sharedInstance] forceRTL:YES];
...

来源

我遇到了同样的问题,这对我有帮助。这是 abit 修改后的答案,无需使用 redux。

首先,I18nManager.isRTL如果不是则使用 forceRTL检查当前状态,然后使用react-native-restart 重新启动

   constructor(props) {          
      //Force RTL
      if(!I18nManager.isRTL){
         I18nManager.forceRTL(true);
         RNRestart.Restart();
      }
   }

一周后,我终于找到了一种使用Redux &react-native-restart插件解决这个问题的逻辑方法 我还使用了一个漂亮的启动画面,用户不会为此目的显示重启进度。

因此,让我们深入研究代码:

还原动作:

export const GET_APP_LAYOUT_DIRECTION = 'GET_APP_LAYOUT_DIRECTION';
export const SET_APP_LAYOUT_DIRECTION = 'SET_APP_LAYOUT_DIRECTION';

export const getAppLayoutDirection = () => ({
  type: GET_APP_LAYOUT_DIRECTION,
});

export const setAppLayoutDirection = direction => ({
  type: SET_APP_LAYOUT_DIRECTION,
  direction
});

Redux 减速器:

import {
    GET_APP_LAYOUT_DIRECTION,
    SET_APP_LAYOUT_DIRECTION,
} from '../actions/app';

const initialState = {
    layout: 'ltr',
};

const reducer = (state = initialState, action) => {
    switch (action.type) {
      case GET_APP_LAYOUT_DIRECTION:
        return {
          ...state,
        };
      case SET_APP_LAYOUT_DIRECTION:
        return {
          ...state,
          layout: action.direction,
        };
      default:
        return state;
    }
};

export default reducer;

主屏幕:

import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import RNRestart from 'react-native-restart'; // Import package from node modules
import { getAppLayoutDirection, setAppLayoutDirection } from '../actions/app';

class Home extends PureComponent {
   constructor(props) {
     super(props);

     this.props.dispatch(getAppLayoutDirection());
     if(this.props.layout === 'ltr'){
       this.props.dispatch(setAppLayoutDirection('rtl'));
       RNRestart.Restart();
     }
  }

  componentDidMount() {
     if(this.props.layout && this.props.layout === 'rtl'){
        SplashScreen.hide();
     }
  }
} 

const mapStateToProps = (state) => {
  const { layout } = state.app;
  return {
    layout
  };
}

export default connect(mapStateToProps)(Home);

确保在 iOS 上,将所有相关的 RTL 语言环境添加到您的 Xcode 项目(例如阿拉伯语)。您还应该确保您的 .ipa 包含每个语言环境的 .lproj 文件夹。否则 iOS 不会选择支持的语言。

这是 React Native 项目中的一个常见问题,您通常不会编写大量 Swift/Obj-C 代码,并且大多数翻译都在 JavaScript 中进行(可能除了 Info.plist 中的某些内容)。