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

Z时代
2024-01-10
分类：问答

我有一个由真棒创建的应用程序，其

布局设计为处于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;

回答：

一周后，终于找到了使用插件解决此问题的逻辑方法

。我还使用了一个漂亮的启动屏幕，以使用户不为此目的显示重启进度。

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

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

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