web-dev-qa-db-fra.com

Qu'est-ce que React Native use to allow JavaScript to be execute on iOS and Android natively?

Qu'est-ce que React Utilisation native sous les couvertures pour interfacer avec iOS et Android? Cordova utilise une WebView pour afficher efficacement une page Web à l'intérieur d'un conteneur natif; Est-ce que React Natif utilise la même approche, sinon, quelle approche utilise-t-il?

javascriptandroidiosreactjsreact-native
31
kharandziuk

Comme vous l'avez remarqué React Native n'est pas basé sur Cordova. Ce n'est pas un site Web qui ressemble à une application pellée dans une WebView.

React Native utilise un runtime JavaScript, mais l'interface utilisateur n'est pas HTML et n'utilise pas WebView. Vous utilisez JSX et React Composants spécifiques natifs pour définir l'interface utilisateur.

Il offre des performances et une apparence au niveau natif, mais certaines parties de l'interface utilisateur doivent être configurées séparément pour iOS et Android. Par exemple, les barres d'outils sont complètement différentes, mais TextInput peut être identique pour les deux systèmes d'exploitation.

13
AMilassin

Sur les simulateurs et appareils iOS, Android émulateurs et appareils React Utilisations natives JavaScriptCore qui est le moteur JavaScript qui alimente Safari. Source

8
Manish Patwari

Pour exécuter du code Javascript

React Native utilise JavaScriptCore (moteur JavaScript qui alimente Safari) sur les simulateurs et appareils Android/iOS.

Dans le cas d'Android, React Native regroupe le JavaScriptCore avec l'application.

Dans le cas d'iOS, React Native utilise le JavaScriptCore fourni par la plate-forme iOS.

Pour communiquer avec Android/iOS

Le pont React Native (pont C++/Java) est utilisé. Il est responsable de la communication entre le thread natif et Javascript.

Dans la plupart des cas, un développeur écrirait l'intégralité de l'application React Native en Javascript. Pour exécuter l'application, l'une des commandes suivantes est émise via l'interface CLI - react-native run-ios ou react-native run-Android. À ce stade, React CLI native engendrerait un packager/bundler de nœuds qui regrouperait le code JS en un seul main.bundle.js fichier. L'emballeur peut être considéré comme étant similaire à Webpack. Maintenant, chaque fois que l'application React Native est lancée, le premier élément à charger est le point d'entrée natif. Le thread natif génère le JS VM thread qui s'exécute) le code JS fourni. Le code JS possède toute la logique métier de l'application. Le thread natif envoie maintenant des messages via le pont RN pour démarrer l'application JS. Maintenant, le thread Javascript généré commence à émettre des instructions au thread natif via le pont RN. Les instructions incluent les vues à charger, les informations à récupérer sur le matériel, etc. Source

4
an0nym0us