Share
Dans la première partie de cette série, vous avez appris à configurer React Native sur votre machine, à créer et à utiliser des composants personnalisés et à utiliser des bibliothèques tierces, telles que moment.js. Dans ce tutoriel, vous apprendrez à effectuer des requêtes réseau à l'aide de aller chercher, rendre une page Web en utilisant la fonction intégrée WebView composant et exécuter l'application sur un périphérique physique.
Dans la première partie de cette série, nous avons utilisé le api fonction, mais nous ne l'avons pas encore défini. Commencez par créer un src répertoire et ajouter un fichier, api.js. Ouvrez le fichier et ajoutez ce qui suit:
module.exports = function (url) return fetch (url) .then (function (response) return response.json ();). then (function (json) return json;);
Ce fichier utilise le aller chercher fonction, disponible par défaut dans React Native. Cette fonction permet à l'application d'effectuer des requêtes réseau. Si vous avez utilisé jQuery, c'est assez similaire à la $ .ajax une fonction. Vous spécifiez une URL et des données facultatives, et vous obtenez une réponse..
La seule différence est que vous devez faire un peu de travail supplémentaire. La fonction de capture de la première promesse renvoie la réponse brute, ce qui signifie que vous devez appeler le JSON méthode sur le réponse pour obtenir la promesse qui renvoie la chaîne JSON. Donc, vous devez retourner le résultat et capturer la promesse en appelant le puis fonction encore une fois et passe dans la fonction qui sera appelée une fois la promesse résolue.
La chaîne JSON serait alors transmise en tant qu'argument à cette fonction. Nous la renvoyons donc simplement. le aller chercher méthode renvoie une promesse quand on appelle le api méthode, nous devons encore appeler le puis méthode pour capturer la réponse réelle, comme nous l'avons fait dans la première partie de cette série.
api (story_url) .then ((story) => …);
Accentsconagua
Page Web Composantle Page Web composant est responsable du rendu d'une page Web. Il utilise le WebView composant pour le faire.
var React = require ('react-native'); var AppRegistry, StyleSheet, Texte, Vue, WebView = Réagir; var Button = require ('react-native-button'); var GiftedSpinner = require ('react-native-gifted-spinner'); var _ = require ('lodash'); var WebPage = React.createClass (getInitialState: function () return isLoading: true;, rendu: function () return ( this.truncate (this.state.pageTitle) this.state.isLoading && ) , tronqué: function (str) return _.truncate (str, 20); , onNavigationStateChange: function (navState) if (! navState.loading) this.setState (isLoading: false, pageTitle: navState.title); , retour: function () this.props.navigator.pop (); ); var styles = StyleSheet.create (conteneur: flex: 1, webview_header: paddingLeft: 10, backgroundColor: '# FF6600', flex: 1, requireContent: 'space-between', flexDirection: 'row', header_item : paddingLeft: 10, paddingDroit: 10, JustifierContenu: 'center', webview_body: flex: 9, bouton: textAlign: 'left', couleur: '#FFF', titre_page: color: '#FFF ', spinner: alignItems:' flex-end '); module.exports = WebPage;Premièrement, nous faisons un peu de ménage en créant les variables dont nous avons besoin et en exigeant les bibliothèques que nous utiliserons.
var React = require ('react-native'); var AppRegistry, StyleSheet, Texte, Vue, WebView = Réagir; var Button = require ('react-native-button'); var GiftedSpinner = require ('react-native-gifted-spinner'); var _ = require ('lodash');Ensuite, nous créons le Page Web composant.
var WebPage = React.createClass (…);
Nous fixons est en cours de chargement à vrai comme état par défaut. Cette propriété est responsable de déterminer si afficher ou non le compteur. Par défaut, le compteur devrait être visible pour indiquer que la page est en cours de chargement.
getInitialState: function () return isLoading: true; ,
Ensuite, nous rendons le composant. Comme le composant de news, celui-ci a aussi un en-tête et un corps. L'en-tête contient un bouton de retour, le titre de la page et un disque.
render: function () return () , this.truncate (this.state.pageTitle) this.state.isLoading &&
Le corps contient le WebView composant. le WebView composant a url et onNavigationStateChange les attributs. le url est l'URL qui a été transmise par le voir page fonctionner dans le Informations composant plus tôt. Donc, quand le code suivant est exécuté:
this.props.navigator.push (name: 'web_page', url: url);
le renderScene méthode en index.android.js est également exécuté et l'adresse URL lui est transmise:
renderScene: function (route, navigateur) var Component = ROUTES [route.name]; revenir () ,
C'est ainsi que nous avons accès à l'URL en l'extrayant des accessoires: this.props.url.
Revenons aux attributs ajoutés à la WebView composant. Nous avons le onNavigationStateChange attribut, utilisé pour spécifier la fonction à exécuter chaque fois que la vue Web navigue vers une nouvelle page. Voici à quoi ressemble cette fonction:
onNavigationStateChange: function (navState) if (! navState.loading) this.setState (isLoading: false, pageTitle: navState.title); ,
Lorsque la fonction ci-dessus est appelée, le État de navigation est transmis comme un argument. Il contient des informations sur l’état actuel de la vue Web, telles que le titre de la page et son chargement ou non. C'est l'endroit idéal pour mettre à jour l'état. Lorsque la page ne se charge plus, nous définissons est en cours de chargement à faux et définir une valeur pour le titre de la page.
Ensuite, nous avons le retour fonction, ce qui fait que le navigateur recule d’une page. Ceci est appelé chaque fois que l'utilisateur appuie sur le bouton Retour dans l'en-tête..
retour: function () this.props.navigator.pop ();
le tronquer function limite la longueur de tout ce qui est passé dans la fonction. Nous utilisons cette fonction pour limiter le texte au titre de la page Web..
truncate: function (str) return _.truncate (str, 20); ,
La feuille de style ressemble à ceci:
var styles = StyleSheet.create (conteneur: flex: 1, webview_header: paddingLeft: 10, backgroundColor: '# FF6600', flex: 1, requireContent: 'space-between', flexDirection: 'row', header_item : paddingLeft: 10, paddingDroit: 10, JustifierContenu: 'center', webview_body: flex: 9, bouton: textAlign: 'left', couleur: '#FFF', titre_page: color: '#FFF ', spinner: alignItems:' flex-end ');
Enfin, exposez le composant au monde extérieur:
module.exports = WebPage;
Pour exécuter l'application, vous avez besoin d'un appareil Android ou d'un émulateur. Si vous souhaitez utiliser un émulateur, je vous recommande d'utiliser Genymotion. Vous pouvez exécuter l'application en exécutant la commande suivante:
réagit natif run-android
Cette commande installe et lance l'application. Mais vous obtiendrez l'erreur suivante si vous essayez de le faire:
En effet, React Native s'attend à ce que le serveur React s'exécute sur votre ordinateur. Le serveur React compile l'application à chaque fois que vous enregistrez les modifications dans votre éditeur de texte. le réagit natif run-android Cette commande est uniquement utilisée pour exécuter l’application dans le but de la tester et de la déboguer. C'est pourquoi il dépend du serveur React pour compiler l'application..
Pour vous débarrasser de l'erreur, vous devez exécuter le programme début réactif commande pour démarrer le serveur. Cela prend un certain temps lors de la première manche, mais quand on arrive à la partie où il est écrit ce qui suit:
Diagramme de dépendance du bâtiment (35135ms)
Vous pouvez ouvrir une nouvelle fenêtre de terminal sur le répertoire de votre projet et exécuter entrée shell adb keyevent 82. Cela ouvre le menu du développeur dans le périphérique ou l'émulateur. Une fois le menu ouvert, sélectionnez paramètres de dev puis sélectionnez serveur de débogage et port.
Cela ouvre une invite vous demandant de saisir l'adresse IP et le port de votre ordinateur. Trouvez l'adresse IP interne de votre ordinateur et entrez-la dans l'invite avec le port. 8081, qui est le port par défaut sur lequel le serveur React est exécuté. En d’autres termes, si votre adresse IP est 192.168.254.254, puis entrez 192.168.254.254:8081.
Après cela, retournez dans le menu du développeur et sélectionnez recharger JS. Cela recharge l'application pour détecter l'instance de serveur React en cours d'exécution. L'application devrait fonctionner sans problèmes.
Si vous souhaitez tester sur un périphérique iOS, suivez le guide sur le site Web React Native..
Nous avons créé une application de lecture de nouvelles plutôt soignée avec React Native. Et après? Voici quelques idées si vous souhaitez en savoir plus sur React Native:
C'est tout. Dans ce didacticiel, vous avez appris à utiliser React Native pour créer une application de lecteur de nouvelles qui communique avec l'API Hacker News. Si vous avez des questions, déposez-les dans les commentaires ci-dessous et je ferai de mon mieux pour y répondre. Vous pouvez trouver les fichiers sources de ce tutoriel sur GitHub. Merci d'avoir lu.
