时间戳

首页 > 解决方案 > React Native 中布局显示方向错误（使用 Expo）

react-native - React Native 中布局显示方向错误（使用 Expo）

问题描述

我使用 Expo 在 React Native 中开发了一个应用程序。当我在 android 模拟器和我的手机上对其进行测试时，布局方面一切都很好。但是，当我将 APK 提供给其他人进行测试时出现了问题对我来说.. RTL 手机的布局被颠倒了.. 我在App.js（根文件）的构造函数中写了这两行来解决问题

I18nManager.allowRTL(false);  
I18nManager.forceRTL(false);

但是，此解决方案仅在应用程序第二次启动时有效，并且在应用程序第一次启动时不起作用（这给人留下了非常糟糕的印象）。我阅读了使用名为RNRestart的 npm 包的解决方案，但它需要linking 和 expo 不支持链接，所以我Util.reload()在第一次启动时使用 Expo 功能，但是，它并没有帮助这些人，他们的应用程序布局在他们第一次使用时仍然显示为反向..

作为快速修复，我们决定显示一条错误消息，提示用户退出应用程序并在这是第一次加载应用程序时重新进入（这是一个非常讨厌的解决方案）

有谁知道为什么会发生这种情况以及如何解决它？

标签： react-nativeexporight-to-left

解决方案

重新启动您的应用程序以防您检测到 I18nManager.isRTL

怎么做？

安装：

npm i fiction-expo-restart

在 app.js 中导入：

import {Restart} from 'fiction-expo-restart';

和

import {I18nManager} from 'react-native';

然后在 componentDidMount() 函数中：

componentDidMount()
{
  if(I18nManager.isRTL) 
  {
    I18nManager.allowRTL(false);  
    I18nManager.forceRTL(false); 
    Restart();
  }
}

我使用的库可以在这里找到： https ://www.npmjs.com/package/fiction-expo-restart

推荐阅读