Mise à niveau vers la nouvelle architecture de React Native (V0.79.3): un guide complet

Avec l’évolution de React Native, la nouvelle architecture apporte des performances significatives et des améliorations de maintenabilité à travers des fonctionnalités comme Turbomodules, Tissuet C ++ Logique partagée. La mise à niveau vers cette architecture peut sembler intimidante, mais avec la bonne stratégie, elle est réalisable.

Dans ce blog, je vais vous guider Deux approches pratiques Pour mettre à niveau votre projet vers la nouvelle architecture dans React Native, le approche recommandéele Défis que j’ai rencontréset comment je les ai surmontés.

Si votre projet actuel est à l’intérieur 2 à 4 versions De la dernière version, la mise à niveau est relativement sûre. Sinon, c’est mieux de Migrez le code manuellement vers un nouveau projet. Nous couvrirons les deux méthodes.

Cette méthode est idéale si votre version actuelle n’est que quelques versions derrière (par exemple, 0,75 à 0,79).

Étape 1. Mettre à jour Android Studio

• Assurez-vous que vous utilisez la dernière version stable d’Android Studio.
• Cela garantit la compatibilité avec les outils Native Gradle, SDK et React mis à jour.

Étape 2. Utilisez l’assistance de mise à niveau native React

Étape 3. Suivez soigneusement les instructions Diff

• Portez une attention particulière aux modifications de fichiers natives – celles-ci sont essentielles pour permettre la nouvelle architecture.
• Utilisez le contrôle de version pour commettre progressivement et en arrière si nécessaire.

📦 Mettre à jour les dépendances tierces

Une fois que vous êtes sur la dernière version, mettez à jour vos dépendances:

Réagitive réactive

Si votre projet actuel est obsolète ou complexe, c’est le moyen le plus sûr et le plus propre de mettre à niveau.

Étapes pour migrer

Étape 1. Créez un nouveau projet

npx @ react-native-community / cli init myapp

Étape 2. Migrez votre base de code existante

Une fois votre nouveau projet Native React créé (de préférence à l’aide de la dernière version stable comme V0.79.3), il est temps d’amener votre logique d’application existante dans le nouvel environnement.

📁 Étape 3: Déplacez votre dossier SRC /

Commencez par copier l’intégralité du répertoire SRC de votre ancien projet dans la racine du nouveau projet

📦 Étape 4: synchroniser et installer les dépendances

Maintenant, ouvrez les fichiers anciens et nouveaux package.json côte à côte.

• Passez soigneusement les dépendances et les dépendances.
• Au lieu de tout copier directement, installez manuellement chaque package dans le nouveau projet en utilisant la dernière version.
• Assurez-vous que chaque dépendance que vous apportez est compatible avec la nouvelle architecture de React Native.

Oui, c’est manuel, mais c’est aussi Bulletproof pour Android et iOS

✅ Étape 5: Vérifiez que cela fonctionne

Après avoir copié votre code source et installé les dépendances mises à jour:

1. Nettoyez la construction Android

CD Android && ./gradlew Clean && cd ..

2. Exécutez l’application sur les deux plates-formes pour s’assurer que tout est câblé correctement:

NPX réactive-natif run-android
NPX réactif-Native Run-ios

3. Regardez les journaux du terminal et des périphériques pour toute erreur, avertissement ou problèmes de compatibilité.

💡 Astuce: si une dépendance entraîne des problèmes avec la nouvelle architecture, consultez la documentation du package ou les problèmes de github. Certains packages peuvent toujours nécessiter un support hérité ou une configuration supplémentaire pour fonctionner correctement.

---

En migré vers la nouvelle architecture native React, j’ai rencontré des problèmes inattendus qui n’étaient pas immédiatement évidents. Voici une ventilation des plus courantes – et comment je me suis résolu chacun.

🌐1. La traduction a échoué
L’ancienne façon de gérer les traductions en utilisant i18n-js ne fonctionne plus de manière fiable dans la nouvelle architecture.

✅ Sol

L’alternative recommandée et stable est react-i18nextqui est moderne, flexible et activement entretenu.

Capture d’écran échouée de traduction

⚛️ 2. Redux ne fonctionne pas

Redux peut rompre dans la nouvelle architecture, surtout si vous utilisez des packages plus anciens comme ‘redux‘ et ‘redux‘.

La nouvelle approche utilise le moderne Redux Boîte à outils:

Capture d’écran échouée Redux

✅ Sol

Remplacer ceci

import {CreateStore, applatmiddleware, compose} à partir de ‘redux’;
importer thunk à partir de «redux-thunk»;
importer rootreducer de ‘./rootreducer’;
const composestore = compose (applicationmiddleware (thunk));
Export const appstore = CreateStore (rootReducer, Composestore);
const Store = () => {
return appstore;
};

Exporter le magasin par défaut;

Avec

import {configurestore} à partir de «@ reduxjs / toolkit»;
importer rootreducer de «./rootreducer»;

Export const appstore = configurestore ({
réducteur: rootReducer,
Devtools: vrai,
middleware: getDefaultMiddleware => getDefaultMiddleware (),
});

const Store = () => {
return appstore;
};

Exporter le magasin par défaut;

Après avoir intégré cela, vous pouvez obtenir cette erreur redux

Erreur Redux

✅ Sol

…
middleware: getDefaultMiddleware =>
getDefaultMiddleware ({
serializablecheck: false,
}),
…

📁3. Les importations absolues échouent

Si vous utilisez des chemins d’importation absolus comme @ ABC / Écrans défini dans package.jsonvous pouvez constater qu’ils ne résolvent pas correctement dans la nouvelle configuration d’architecture.

🛠️ Dans mon cas, j’ai dû retomber temporairement sur des chemins relatifs comme:

importer myscreen de ‘../../screens/myscreen’;

✅ Sol

Plus tard, j’ai correctement corrigé cela en configurant babel.config.js et tsconfig.json.

4. Le pontage échoue

Avec la nouvelle architecture, React Native introduit un Modèle de communication sans pont.

✅ Sol

• Les modules natifs hérités écrits à l’aide de l’ancien pont peuvent cesser de fonctionner.
• Vous devez migrer vers des turbomodules, définir des fichiers de spécifications et compter sur Codegen pour l’intégration des modules tapée.

Bien que ce soit plus strictil apporte de meilleures performances, une sécurité de type et une interopérabilité native.

5. Les GIF ne chargent pas

Si votre application utilise des GIF, ils peuvent ne pas fonctionner correctement avec la nouvelle architecture (tissu / turbomodules).

✅ Sol

Ajouter la dépendance au Fresco GIF à app / build.gradle:

implémentation ‘com.facebook.fresco: animé-gif: 3.6.0’

⚠️ Remarque: Si 3.6.0 n’est pas compatible, utilisez plutôt la dernière version stable de la fresque.

---

6. SAFEAREAVIEN chevauche la barre d’état sur Android 15+ (problèmes de bord à bord)

Si le contenu de votre application chevauche la barre d’état ou Affichage de bord à bord ne fonctionne pas correctement sur Android 15essayez cette solution.

✅ Sol
Ajoutez cette ligne à votre Android /Android/app/src/main/res/values/styles.xml

true

7. React-Native-linear-Gradient Tadding ne s’applique pas

Lors de l’ajout de rembourrage directement au composant , il ne fonctionnera pas comme prévu.
Au lieu de cela, enveloppez votre contenu dans une et appliquez un rembourrage à cette .

✅ Sol

Votre texte
View>
Lineargradient>

8. Font personnalisé ne fonctionne pas sur iOS
Certaines polices personnalisées peuvent ne pas rendre correctement sur iOS en raison de la famille des polices et de la gestion du poids dans rctfontutils.mm.

✅ Sol

Référence GitHub: PR # 47691

9. La taille de l’APK a augmenté

Après la mise à niveau vers la nouvelle architecture, j’ai remarqué que la taille de l’APK augmentait considérablement:

Cependant, avec un simple ajustement, j’ai pu le faire tomber radicalement – mon dernier APK n’était que de 65 Mo.

⚠️ IMPORTANT: Après avoir appliqué ce changement, assurez-vous de tester les performances de votre application et de lancer soigneusement le temps.
Il y a eu des discussions communautaires mentionnant que le réglage Android: extractnativelibs = « true » pourrait légèrement avoir un impact sur les performances de lancement.
Dans mon cas, j’ai soigneusement comparé le comportement de lancement des applications avant et après le changement – et je n’ai trouvé aucune différence notable de performance.

✅ Sol

Mettez à jour votre AndroidManifest.xml pour inclure les éléments suivants dans la balise :

Android: ExtractNativeLiBs = « true »
…
>

Cela garantit que les bibliothèques indigènes inutilisées ne sont pas groupées inutilement.

10. 🛑 Échec de la construction du progrès

Si vous utilisez Proguard ou activez les minifilatés, vous pouvez voir cette erreur R8 courante:

Proguard Build a échoué Capture d’écran

✅ Sol

Construisez une version APK First → Génère Missing_rules.txt à:
Android / App / build / Sorties / Mapping / Release / Missing_rules.txt
Copier les règles de manquer_rules.txt → Coller dans Android / App / Proguard-Rules.pro:

# À partir des règles manquantes R8
-keeper class com.example.someclass {*; }
-Dontwarn com.example.otherclass

📌 fusionner avec les règles existantes pour éviter les conflits.
📝 Réf: React Native Github Issue # 36505

11. Problème Android Double Splash

Lors de l’exécution de l’application, je remarque un double problème d’éclaboussures sur Android:

✅ Sol

1. Créer un dessin à l’éclaboussure personnalisée
À l’intérieur de votre projet, créez le fichier:

android / app / src / main / res / drawable / spash_screen.xml

Ajouter le code suivant:

xml version = ”1.0 ″ Encoding =” UTF-8 ″?>

>



20
item>

couche-list>

2. Mettre à jour Styles.xml

Ouvrez Android / App / Src / Main / Res / Values ​​/ Styles.xml et ajouter:

@ Drawable / Splash_Screen
? Att / ColorPrimary

Cela garantit que l’écran Splash défini dans splash_screen.xml est utilisé comme fond de fenêtre, empêchant le double problème de éclaboussures sur Android.

12. Problèmes de l’installation de POD iOS

Lors de l’installation de POD exécutée, j’ai couru dans les cocoapodes et l’erreur de construction suivantes:

Erreur d’installation de POD

✅ Sol
Modifiez votre podfile comme suit:

Plateforme: iOS, ’15 .1 ‘# Ajouter ceci
use_modular_headers! # Ajouter ceci

cibler «votre appnoi»
config = use_native_modules!

# ——— Ajouter ce bloc ———
$ RnfireBaseasstaticFramework = true
use_frameworks! : Linkage =>: statique

pod ‘Firebase’ ,: modular_headers => true
pod ‘firebasecoreinternal’ ,: modular_headers => true
pod ‘Googleutiability’ ,: modular_headers => true
pod ‘firebaseCore’ ,: modular_headers => true
# — Fin —

use_react_native! (…)
fin

Puis courez:

CD IOS et installation de pod

Cela garantit la compatibilité avec Firebase et d’autres dépendances modulaires lors de l’utilisation de la nouvelle architecture.

13. Problème iOS Double Splash – Fix

• Ouvrez (ou créez) iOS / YourApp / LaunchScreen.Storyboard.
• Définir la couleur d’arrière-plan (par exemple, noir # 000000).
• Ajouter le logo de l’application (ImageView) → Centre avec la disposition automatique.
• Placez le logo dans iOS / yourApp / images.xcassets (@ 1x, @ 2x, @ 3x).
• Dans xcode → Projet → Général → Définir le fichier d’écran de lancement = LaunchScreen.storyboard.

Les problèmes et les solutions que j’ai partagés sont basés sur ma configuration de projet spécifique.
Vous pourriez faire face à différents barrages routiers en fonction de votre architecture, de vos colis et de vos intégrations.

Validez toujours chaque solution avec votre propre configuration, et n’hésitez pas à modifier les choses en conséquence.