React Native Arabic (RTL) without forceRTL

问题

In RN my bilingual app (English - Arabic), I have used I18nManager (views) and I18n (for translations)

When I am changing app language to Arabic, the whole app gets reloaded again from the splash-screen using this code:

I18nManager.forceRTL(true)

Ideally, it should not restart the app from start and it should continue with the current screen with Arabic data.

Currently, it is not happening, only translation elements are getting converted using I18n.t('keyword') but for views Arabic alignment, it's not proper.

Still looking for a better solution, let me know if anyone achieved it.

Thanks
Sopo !!

回答1:

you should put this code in the top component in your project

import RNRestart from "react-native-restart";

I18nManager.forceRTL(true); if (!I18nManager.isRTL) RNRestart.Restart();

回答2:

I working on a project which has two languages, Arabic and English.i use redux for handling app language. I put all styles on redux and handle app style with redux. and when user change language all styles on my app change to that language . also all text handled with redux too. with this way, my app does not reload and app language changed immediately.

回答3:

In Expo use

import {Updates} from "expo"

Updates.reload()

回答4:

If you guys wants to store stack state after reloading(because there is no other option without reloading) and want stack state back you can follow this link also you can check my code. Link: React navigation state persist

Any Component

AsyncStorage.setItem('navigation_state', JSON.stringify(navigation.dangerouslyGetState()));

My App.js

const App = () => {
  const [initialState, setInitialState] = useState();
  const [isReady, setIsReady] = useState(false);

  useEffect(() => {
    restoreState();
  }, []);
  const restoreState = async () => {
    try {
      const savedStateString = await AsyncStorage.getItem('navigation_state');
      const state = savedStateString ? JSON.parse(savedStateString) : undefined;
      if (state !== undefined) {
        AsyncStorage.removeItem('navigation_state');
        setInitialState(state);
      }
    } finally {
      setIsReady(true);
    }
  };
  if (!isReady) {
    return null;
  }
  return (
    <Provider store={store}>
      <NavigationContainer
        initialState={initialState}
        ref={rootNavigationRef}>
        <Root>
          <AppNavigator />
        </Root>
      </NavigationContainer>
    </Provider>
  );
};

来源：https://stackoverflow.com/questions/58057589/react-native-arabic-rtl-without-forcertl