在 RTL 设备中强制执行 RTL

Question

新版React Native发布了对RTL设备的支持： https://facebook.github.io/react-native/blog/2016/08/19/right-to-left-support-for-react-native-apps.html
但是，在 RTL android 设备中，RTL 布局似乎是强制的，并且无法更改它，因此现在所有应用程序都无法用于 RTL 设备。如何强制我的应用使用 LTR？

Answer 1

我设法通过添加到 MainApplication.java 来解决这个问题：

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

public class MainApplication extends Application implements ReactApplication {
    @Override
    public void onCreate() {
        super.onCreate();

        // FORCE LTR
        I18nUtil sharedI18nUtilInstance = I18nUtil.getInstance();
        sharedI18nUtilInstance.allowRTL(getApplicationContext(), false);
        ....
    }
}

Answer 2

在 manifest.xml 文件中将 android:supportsRtl="false" 添加到您的应用程序标签

Answer 3

如果您使用的是 Expo

import { I18nManager} from 'react-native';
I18nManager.allowRTL(false);

export default class <className> extends Component {



}

Answer 4

@atlanteh 的回答是正确的。我只是为那些有 ios 背景但不太了解 Android.

的人提供详细的答案

首先，尝试一次。如果第一个不起作用，则尝试 2。如果仍然不起作用，则尝试两者。然后它将显示预期的输出。

回答 1

MainApplication.java

public class MainApplication extends Application implements ReactApplication {
    @Override
    public void onCreate() {
        super.onCreate();

        // FORCE LTR
        I18nUtil sharedI18nUtilInstance = I18nUtil.getInstance();
        sharedI18nUtilInstance.allowRTL(getApplicationContext(), false);
        ....
    }
}

答案 2

AndroidManifest.xml

我已经在 application 标签中添加了 android:supportsRtl="false"

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.appname">
    ........
    <application 
      android:supportsRtl="false"
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:roundIcon="@mipmap/ic_launcher_round"
      android:allowBackup="false"
      android:theme="@style/AppTheme">
      android:name="com.facebook.react.devsupport.DevSettingsActivity" />
       ....
    </application>

</manifest>

Answer 5

只需在您的项目入口点添加这些代码行 例如App.tsx

import { I18nManager } from "react-native";

// disable RTL
try {
  I18nManager.allowRTL(false);
  I18nManager.forceRTL(false);
  // the next line is the most effective one
  I18nManager.swapLeftAndRightInRTL(false);
} catch (e) {
  console.log(e);
}

在 RTL 设备中强制执行 RTL

RTL is forced in RTL devices

android

right-to-left

react-native