Изменение макета i18n не одно и то же в Android и iOS на выставке React-native Expo ⇐ Android

[Anonymous]

В моем приложении через i18n я поддерживаю два языка (английский и арабский). У меня возникла странная проблема с моей локальной средой при использовании expo-go и моей производственной средой (установленные приложения через магазины приложений) не совпадают. Например, в моей локальной разработке для Android с помощью expo-go тексты в моем заголовке на арабском языке беспорядочны, но когда я использую версию Android Prod (ту, которую я установил через магазин воспроизведения), тот же заголовок исправлен, я с этим проблем нет.
Заголовок в Android expo-go


И это не только это, мои версии Android и iOS также не совпадают. К сожалению, у меня нет устройства Apple, чтобы протестировать мое приложение в expo-go, но вот что я получаю для заголовка в профессиональных версиях моего приложения:
Заголовок в Android ( Чисто, без проблем)

Заголовок в IOS (Проблематично). Я получил эту фотографию с iPhone моего друга.


Может кто-нибудь сказать мне, почему такая заметная разница и что я делаю не так? У меня возникают подобные проблемы во всем приложении?
Вот код моего компонента заголовка, возможно, благодаря этому кто-нибудь сможет найти причину проблемы

Код: Выделить всё

import React, {PropsWithChildren} from 'react';
import {Text, TouchableOpacity, View, ViewStyle} from 'react-native';
import {theme} from '../constants';
import {useAppNavigation} from '../hooks';
import {Feather} from "@expo/vector-icons";

type Props = PropsWithChildren void;
onBackPress?: () => void;
admin?: boolean;
}>;

const Header = ({
title,
style,
goBack,
skip,
skipText,
skipOnPress,
onBackPress,
}: Props) => {
const navigation = useAppNavigation();

const goPreviousPage = () => {
if (onBackPress) {
onBackPress();
} else if (navigation.canGoBack()) {
navigation.goBack();
} else {
// Go back home page
navigation.reset({
index: 0,
routes: [{name: 'TabNavigator'}],
});
}
}

const renderGoBack = () => {
if (goBack) {
return (





);
}

return null;
};

const renderSkipText = () => {
if (skip) {
return (


{skipText}


);
}
return null;
};

const renderTitle = () =>  {
if (title) {
return (

{title}

);
}

return null;
};

const containerStyle: ViewStyle = {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
height: 52,
backgroundColor: theme.colors.transparent,
...style,
};

return (

{renderGoBack()}
{renderTitle()}
{renderSkipText()}

);
};

export default Header;

А это моя конфигурация i18n.ts

Код: Выделить всё

import i18n, {LanguageDetectorAsyncModule} from 'i18next';
import {I18nManager} from 'react-native';
import en from './locales/en/translation.json';
import fr from './locales/fr/translation.json';
import ar from './locales/ar/translation.json';
import * as Localization from 'expo-localization';
import AsyncStorage from "@react-native-async-storage/async-storage";
import {reloadAppAsync} from "expo";

const resources = {
en: {translation: en},
ar: {translation: ar},
fr: {translation: fr},
};

const languageCodeKey = "languageCode";

const languageDetector: LanguageDetectorAsyncModule = {
type: 'languageDetector',
async: true,
// @ts-ignore
detect: async (callback: (language: string) => void): Promise => {
try {
// If not null in the async storage, return it
const languageCode = await AsyncStorage.getItem(languageCodeKey);
if (languageCode) {
return callback(languageCode);
}
// Return the device's default language or fallback to Arabic
const defaultLanguageCode = Localization.getLocales()[0]?.languageCode || 'ar';
return callback(defaultLanguageCode);
} catch (error) {
console.error('Error detecting language:', error);
callback('ar');
}
},
init: () => {
},
cacheUserLanguage: async (languageCode: string) => {
try {
await AsyncStorage.setItem(languageCodeKey, languageCode);
const isRTL = i18n.language === 'ar';
if (I18nManager.isRTL !== isRTL) {
I18nManager.forceRTL(isRTL);
I18nManager.allowRTL(isRTL);
await reloadAppAsync();
}
} catch
(error) {
console.error('Error caching language:', error);
}
}
};

i18n
.use(languageDetector)
.init({
compatibilityJSON: 'v3',
resources,
fallbackLng: 'ar',
interpolation: {
escapeValue: false,
},
})
.then(() => {
const isRTL = i18n.language === 'ar';
I18nManager.forceRTL(isRTL);
I18nManager.allowRTL(isRTL);
})
.catch(error => console.log(`Error ${error}`));

export default i18n;

Я использую ForceRTL и AllowRTL, как предложено в бесчисленных руководствах.
РЕДАКТИРОВАТЬ: Вот как это выглядит на английском языке. во всех моих версиях Android (без проблем)



Подробнее здесь: https://stackoverflow.com/questions/792 ... ative-expo