I18nManager.forceRTL不会在第一个应用程序加载中应用更改

Question

我有一个由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;

Answer 1

我有同样的问题，并通过调用解决它forceRTL在MainApplication.java在onCreate方法。

...
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];
...

来源

Answer 2

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

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

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

Answer 3

一周之后，终于找到了使用Redux ＆react-native-restart插件解决此问题的逻辑方法 。我还使用了一个漂亮的启动屏幕，以使用户不为此目的显示重启进度。

因此，让我们深入研究代码：

Redux动作：

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