react-native

#react-
native
Table des matières
À propos 1

Chapitre 1: Démarrer avec rea-native 2

Remarques 2

Examples 2

Configuration pour Mac 2

Configuration pour Windows 14

Configuration pour Linux (Ubuntu) 15

Démarrez le terminal et exécutez les commandes suivantes pour installer nodeJS: 15

Si la commande de noeud est indisponible 16

Instalations NodeJS alternatives: 16

vérifier si vous avez la version actuelle 16

Exécutez le npm pour installer le réactif 16

Android SDK ou Android Studio 16

SDK Android e ENV 16

Exemple d'application init 17

Obs: Toujours vérifier si la version sur android/app/[Link] est la même que les outi 18

Ouvrez Android AVD pour configurer un Android virtuel. Exécutez la ligne de commande: 18

Chapitre 2: Android - Bouton Retour de matériel 19

Examples 19

Détecter le bouton Retour du matériel dans Android 19

Exemple de BackAndroid avec Navigator 19

Exemple de détection de bouton retour matériel à l'aide de BackHandler 20

Gestion du bouton retour du matériel à l'aide de BackHandler et des propriétés de navigati 20

Chapitre 3: API d'animation 22

Examples 22

Animer une image 22

Chapitre 4: Bonjour le monde 23

Examples 23

Modification de [Link] ou [Link] 23

Bonjour le monde! 23
Chapitre 5: Coiffant 24

Introduction 24

Syntaxe 24

Remarques 24

Examples 24

Style utilisant des styles en ligne 24

Styling à l'aide d'une feuille de style 24

Ajouter plusieurs styles 25

Styling conditionnel 26

Chapitre 6: Composants 27

Examples 27

Composant de base 27

Composant avec état 27

Composant sans état 27

Chapitre 7: Créer un partageable APK pour Android 29

Introduction 29

Remarques 29

Examples 29

Créer une clé pour signer l'APK 29

Une fois la clé générée, utilisez-la pour générer la version installable: 29

Générer la construction en utilisant gradle 29

Télécharger ou partager le fichier APK généré 29

Chapitre 8: Disposition 31

Examples 31

Flexbox 31

flexDirection 31

Axe d'alignement 32

Alignement 34

Taille de flex 34

Chapitre 9: ESLint in react-native 35

Introduction 35
 Examples 35

Comment commencer 35

Chapitre 10: Etat 36

Syntaxe 36

Examples 36

setState 36

Exemple complet 36

Initialiser l'état 38

Chapitre 11: Exécuter une application sur l'appareil (version Android) 39

Remarques 39

Examples 39

Lancer une application sur un appareil Android. 39

Chapitre 12: Images 40

Examples 40

Module d'image 40

Exemple d'image 40

Source d'image conditionnelle 40

Utilisation d'une variable pour le chemin de l'image 40

Pour adapter une image 41

Chapitre 13: Instructions en ligne de commande 42

Examples 42

Vérifier la version installée 42

Mettre à niveau le projet existant vers la dernière version RN 42

Enregistrement 42

Initialiser et démarrer avec le projet React Native 42

Démarrer React Native Packager 43

Ajouter un projet Android pour votre application 43

Chapitre 14: Intégration avec Firebase pour l'authentification 44

Introduction 44

Examples 44

React Native - ListView avec Firebase 44

Authentification dans React Native avec Firebase 45

Chapitre 15: Le débogage 47

Syntaxe 47

Examples 47

Démarrez le débogage JS à distance dans Android 47

Utiliser [Link] () 47

Chapitre 16: Le routage 48

Introduction 48

Examples 48

Composant Navigateur 48

Chapitre 17: Les accessoires 49

Introduction 49

Examples 49

Quels sont les accessoires? 49

Utilisation des accessoires 49

PropTypes 50

Accessoires par défaut 51

Chapitre 18: Liaison de l'API native 52

Introduction 52

Examples 52

Liens sortants 52

Schémas d'URI 52

Liens entrants 53

Chapitre 19: ListView 54

Examples 54

Exemple simple 54

Chapitre 20: Meilleures pratiques de rendu 55

Introduction 55

Examples 55

Fonctions dans JSX 55

Chapitre 21: Meilleures pratiques du navigateur 57

Examples 57
 Navigateur 57

Utiliser rea-navigation pour naviguer dans les applications natives de réaction 59

Navigation ré-native avec react-native-router-flux 60

Chapitre 22: Modal 62

Introduction 62

Paramètres 62

Examples 62

Exemple de base modal 62

Exemple modal transparent 63

Chapitre 23: Module de plate-forme 65

Examples 65

Trouver le type / version du système d'exploitation 65

Chapitre 24: Modules natifs 66

Examples 66

Créez votre module natif (IOS) 66

introduction 66

Exemple 66

Chapitre 25: Navigateur avec boutons injectés depuis les pages 68

Examples 68

introduction 68

Exemple complet commenté 68

Chapitre 26: Notification push 72

Introduction 72

Remarques 72

Examples 72

Push Setup Simple Setup 72

Navigation vers la scène à partir de la notification 74

Chapitre 27: Polices Personnalisées 77

Examples 77

Étapes pour utiliser des polices personnalisées dans React Native (Android) 77

Étapes pour utiliser des polices personnalisées dans React Native (iOS) 77
 Polices personnalisées pour Android et IOS 78

Android 79

iOS 80

Chapitre 28: RefreshControl avec ListView 81

Remarques 81

Examples 81

Contrôle de rafraîchissement 81

Fonction onRefresh Exemple 81

Refresh Control with ListView Exemple complet 81

Chapitre 29: Rendu de plusieurs accessoires 84

Examples 84

rendre plusieurs variables 84

Chapitre 30: Requêtes HTTP 85

Syntaxe 85

Remarques 85

Examples 85

WebSockets 85

HTTP avec l'API de récupération 85

Mise en réseau avec XMLHttpRequest 86

Utiliser des promesses avec l'API d'extraction et Redux 86

Socket Web avec [Link] 87

Http avec axios 88

Chapitre 31: Test d'unité 90

Introduction 90

Examples 90

Test unitaire avec blague 90

Test unitaire dans React Native utilisant Jest 91

Chapitre 32: WebView 92

Introduction 92

Examples 92

Composant simple utilisant webview 92

Crédits 93
À propos
You can share this PDF with anyone you feel could benefit from it, downloaded the latest version
from: react-native

It is an unofficial and free react-native ebook created for educational purposes. All the content is
extracted from Stack Overflow Documentation, which is written by many hardworking individuals at
Stack Overflow. It is neither affiliated with Stack Overflow nor official react-native.

The content is released under Creative Commons BY-SA, and the list of contributors to each
chapter are provided in the credits section at the end of this book. Images may be copyright of
their respective owners unless otherwise specified. All trademarks and registered trademarks are
the property of their respective company owners.

Use the content presented in this book at your own risk; it is not guaranteed to be correct nor
accurate, please send your feedback and corrections to info@[Link]

[Link] 1
Chapitre 1: Démarrer avec rea-native
Remarques
React Native vous permet de créer des applications mobiles en utilisant uniquement JavaScript. Il
utilise la même conception que React, vous permettant de composer une interface utilisateur
mobile riche à partir de composants déclaratifs.

Avec React Native, vous ne créez pas une «application Web mobile», une «application HTML5»
ou une «application hybride». Vous construisez une véritable application mobile qui ne se
distingue pas d'une application créée avec Objective-C ou Java. React Native utilise les mêmes
éléments fondamentaux que les applications iOS et Android classiques. Vous venez de mettre ces
blocs de construction ensemble en utilisant JavaScript et React.

Il est open-source et maintenu par Facebook.

• Site Internet
• Documentation
• GitHub Repository

Source: site web React Native

Examples
Configuration pour Mac

Installation gestionnaire de paquets Homebrew brew

Collez-le à l'invite du terminal.

/usr/bin/ruby -e "$(curl -fsSL

[Link]

Installation de l'IDE Xcode

Téléchargez-le en utilisant le lien ci-dessous ou trouvez-le sur le Mac App Store

[Link]

REMARQUE: Si [Link] est installé avec la version de production de

[Link] , assurez-vous d'utiliser la version de production de l'outil xcodebuild . Vous
pouvez le configurer avec:

sudo xcode-select -switch /Applications/[Link]/Contents/Developer/

Installation de l'environnement Android

• git git

[Link] 2
 * Si vous avez installé XCode, Git est déjà installé, sinon exécutez la commande suivante

brew install git

• Dernier JDK

• Studio Android

Choisissez une installation personnalisée

[Link] 3
[Link] 4
 Choisissez Performance et Android Virtual Device

[Link] 5
[Link] 6
 Après l'installation, choisissez Configurer -> SDK Manager dans la fenêtre de bienvenue
d'Android Studio.

[Link] 7
[Link] 8
 Dans la fenêtre Plateformes SDK, choisissez Afficher les détails du package et sous Android
6.0 (Marshmallow), vérifiez que les API Google, Image du système Intel x86 Atom, Image du
système Intel x86 Atom_64 et API système Intel x86 Atom_64 sont cochées.

[Link] 9
[Link] 10
 Dans la fenêtre Outils du SDK, choisissez Afficher les détails du package et sous Outils de
génération du SDK Android, assurez-vous que l'option Outils de génération du SDK Android
23.0.1 est sélectionnée.

[Link] 11
[Link] 12
 • Variable d'environnement ANDROID_HOME

Assurez-vous que la variable d'environnement ANDROID_HOME pointe vers votre SDK

Android existant. Pour ce faire, ajoutez ceci à votre ~ / .bashrc, ~ / .bash_profile (ou à tout ce
que votre shell utilise) et rouvrez votre terminal:

Si vous avez installé le SDK sans Android Studio, cela peut être quelque chose comme: /
usr / local / opt / android-sdk

export ANDROID_HOME=~/Library/Android/sdk

Dépendances pour Mac

Vous aurez besoin de Xcode pour iOS et Android Studio pour Android, [Link], les outils de ligne
de commande React Native et Watchman.

Nous vous recommandons d'installer node et watchman via Homebrew.

brew install node

brew install watchman

Watchman est un outil de Facebook pour regarder les changements dans le système
de fichiers. Il est fortement recommandé de l'installer pour de meilleures performances.
C'est facultatif.

Node est livré avec npm, qui vous permet d'installer l'interface de ligne de commande native
React.

npm install -g react-native-cli

Si vous obtenez une erreur de permission, essayez avec sudo:

sudo npm install -g react-native-cli.

Pour iOS, le moyen le plus simple d’installer Xcode est d’utiliser le Mac App Store. Et pour
Android télécharger et installer Android Studio.

Si vous envisagez de modifier le code Java, nous vous recommandons d'utiliser Gradle Daemon,
qui accélère la génération.

Test de votre installation native React

Utilisez les outils de ligne de commande React Native pour générer un nouveau projet React
Native appelé "AwesomeProject", puis exécutez des run-ios natifs dans le dossier nouvellement
créé.

react-native init AwesomeProject

cd AwesomeProject
react-native run-ios

[Link] 13
Vous devriez voir votre nouvelle application s'exécuter sous iOS Simulator prochainement. run-ios
natif de react-end n'est qu'un moyen d'exécuter votre application - vous pouvez également
l'exécuter directement depuis Xcode ou Nuclide.

Modifier votre application

Maintenant que vous avez réussi à exécuter l'application, modifions-la.

• Ouvrez [Link] ou [Link] dans votre éditeur de texte de choix et éditez

certaines lignes.
• Hit Command + R dans votre simulateur iOS pour recharger l'application et voir votre
changement! C'est tout!

Toutes nos félicitations! Vous avez exécuté et modifié avec succès votre première application
React Native.

source: Pour commencer - React-Native

Configuration pour Windows

Remarque: vous ne pouvez pas développer d’applications réactives pour iOS sur Windows, mais
uniquement des applications Android réactives.

Les documents de configuration officiels pour rea-native sur Windows peuvent être trouvés ici . Si
vous avez besoin de plus de détails, voici un guide granulaire .

Outils / Environnement

• Windows 10
• outil de ligne de commande (par exemple, ligne de commande Powershell ou Windows)
• Chocolaté ( étapes pour configurer via PowerShell )
• Le JDK (version 8)
• Studio Android
• Une machine Intel avec la technologie de virtualisation activée pour HAXM (facultatif,
nécessaire uniquement si vous souhaitez utiliser un émulateur)

1) Configurez votre machine pour réagir au développement natif

Démarrez la ligne de commande en tant qu'administrateur exécutez les commandes suivantes:

choco install [Link]

choco install python2

Redémarrez la ligne de commande en tant qu'administrateur pour pouvoir exécuter npm

npm install -g react-native-cli

Après avoir exécuté la dernière commande, copiez le répertoire dans lequel react-native a été
installé. Vous en aurez besoin pour l'étape 4. J'ai essayé ceci sur deux ordinateurs dans un cas:
C:\Program Files (x86)\Nodist\v-x64\6.2.2

[Link] 14
. Dans l'autre c'était: C:\Users\admin\AppData\Roaming\npm

2) Définissez vos variables d'environnement

Un guide étape par étape avec des images peut être trouvé ici pour cette section.

Ouvrez la fenêtre Variables d'environnement en naviguant vers:

[Clic droit] Menu "Démarrer" -> Système -> Paramètres système avancés -> Variables
d'environnement

Dans la section inférieure, recherchez la variable système "Path" et ajoutez l'emplacement

d'installation de react-native à l'étape 1.

Si vous n'avez pas ajouté de variable d'environnement ANDROID_HOME, vous devrez également
le faire ici. Dans la fenêtre "Variables d'environnement", ajoutez une nouvelle variable système
nommée "ANDROID_HOME" et la valeur correspondant au chemin d'accès à votre SDK Android.

Redémarrez ensuite la ligne de commande en tant qu'administrateur pour pouvoir y exécuter des
commandes réactives.

3) Créez votre projet En ligne de commande, accédez au dossier dans lequel vous souhaitez
placer votre projet et exécutez la commande suivante:

react-native init ProjectName

4) Lancez votre projet Démarrez un émulateur depuis Android Studio Accédez au répertoire
racine de votre projet en ligne de commande et exécutez-le:

cd ProjectName
react-native run-android

Vous pouvez rencontrer des problèmes de dépendance. Par exemple, il se peut que vous n'ayez
pas la version correcte des outils de génération. Pour résoudre ce problème, vous devrez ouvrir le
gestionnaire sdk dans Android Studio et télécharger les outils de construction à partir de là.

Félicitations!

Pour actualiser l'interface utilisateur, vous pouvez appuyer deux fois sur la touche r dans
l'émulateur et exécuter l'application. Pour voir les options du développeur, vous pouvez appuyer
sur ctrl + m .

Configuration pour Linux (Ubuntu)

1) Setup [Link]

Démarrez le terminal et exécutez les

[Link] 15
commandes suivantes pour installer nodeJS:
curl -sL [Link] | sudo -E bash -

sudo apt-get install nodejs

Si la commande de noeud est indisponible

sudo ln -s /usr/bin/nodejs /usr/bin/node

Instalations NodeJS alternatives:

curl -sL [Link] | sudo -E bash -

sudo apt-get install -y nodejs

ou

curl -sL [Link] | sudo -E bash -

sudo apt-get install -y nodejs

vérifier si vous avez la version actuelle

node -v

Exécutez le npm pour installer le réactif

sudo npm install -g react-native-cli

2) Configurer Java

sudo apt-get install lib32stdc++6 lib32z1 openjdk-7-jdk

3) Configuration d'Android Studio:

Android SDK ou Android Studio

[Link]

SDK Android e ENV

export ANDROID_HOME=/YOUR/LOCAL/ANDROID/SDK

[Link] 16
 export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools

4) émulateur d'installation:

Sur le terminal, exécutez la commande

android

Sélectionnez "SDK Platforms" dans le SDK Manager et vous devriez voir une coche bleue à côté
de "Android 7.0 (Nougat)". Si ce n'est pas le cas, cliquez sur la case à cocher puis sur "Appliquer".

5) Lancer un projet

Exemple d'application init

react-native init ReactNativeDemo && cd ReactNativeDemo

[Link] 17
Obs: Toujours vérifier si la version sur android/app/[Link] est la
même que les outils de construction téléchargés sur votre
SDK Android

android {
compileSdkVersion XX
buildToolsVersion "XX.X.X"
...

6) Exécuter le projet

Ouvrez Android AVD pour configurer un Android virtuel.

Exécutez la ligne de commande:

android avd

Suivez les instructions pour créer un périphérique virtuel et lancez-le

Ouvrez un autre terminal et exécutez les lignes de commande:

react-native run-android
react-native start

Lire Démarrer avec rea-native en ligne: [Link]

avec-rea-native

[Link] 18
Chapitre 2: Android - Bouton Retour de
matériel
Examples
Détecter le bouton Retour du matériel dans Android

[Link]('hardwareBackPress', function() {
if (![Link]()) {
[Link]();
return true;
}
return false;
});

Remarque: [Link]() et [Link]() ne sont pas des fonctions intégrées, vous devez
également les implémenter. ( [Link]
native/commit/ed7e0fb31d842c63e8b8dc77ce795fac86e0f712)

Exemple de BackAndroid avec Navigator

Voici un exemple d'utilisation de BackAndroid React Native avec le Navigator .

componentWillMount enregistre un écouteur d'événement pour gérer les taps sur le bouton arrière. Il
vérifie s'il y a une autre vue dans la pile d'historique, et s'il en existe une, elle reprend le
comportement par défaut.

Plus d'informations sur les documents BackAndroid et les documents Navigator .

import React, { Component } from 'react'; // eslint-disable-line no-unused-vars

import {
BackAndroid,
Navigator,
} from 'react-native';

import SceneContainer from './Navigation/SceneContainer';

import RouteMapper from './Navigation/RouteMapper';

export default class AppContainer extends Component {

constructor(props) {
super(props);

[Link];
}

componentWillMount() {
[Link]('hardwareBackPress', () => {
if ([Link] && [Link]().length > 1) {

[Link] 19
 [Link]();
return true;
}
return false;
});
}

renderScene(route, navigator) {
[Link] = navigator;

return (
<SceneContainer
title={[Link]}
route={route}
navigator={navigator}
onBack={() => {
if ([Link] > 0) {
[Link]();
}
}}
{...[Link]} />
);
}

render() {
return (
<Navigator
initialRoute={<View />}
renderScene={[Link](this)}
navigationBar={
<[Link]
style={{backgroundColor: 'gray'}}
routeMapper={RouteMapper} />
} />
);
}
};

Exemple de détection de bouton retour matériel à l'aide de BackHandler

Depuis BackAndroid est obsolète. Utilisez BackHandler au lieu de BackAndroid.

import { BackHandler } from 'react-native';

{...}
ComponentWillMount(){
[Link]('hardwareBackPress',()=>{
if (![Link]()) {
[Link]();
return true;
}
return false;
});
}

Gestion du bouton retour du matériel à l'aide de BackHandler et des

propriétés de navigation (sans utiliser BackAndroid et Navigateur obsolète

[Link] 20
obsolètes)

Cet exemple vous montrera la navigation qui est généralement attendue dans la plupart des flux.
Vous devrez ajouter le code suivant à chaque écran en fonction du comportement attendu. Il y a 2
cas:

1. S'il y a plus d'un écran sur la pile, le bouton Retour de l'appareil affichera l'écran précédent.
2. S'il n'y a qu'un écran sur la pile, le bouton Retour du périphérique quittera l'application.

Cas 1: Afficher l'écran précédent

import { BackHandler } from 'react-native';

constructor(props) {
super(props)
[Link] = [Link](this);
}

componentWillMount() {
[Link]('hardwareBackPress', [Link]);
}

componentWillUnmount() {
[Link]('hardwareBackPress', [Link]);
}

handleBackButtonClick() {
[Link](null);
return true;
}

Important: n'oubliez pas de lier method in constructor et de supprimer listener dans

componentWillUnmount.

Cas 2: application de sortie

Dans ce cas, pas besoin de manipuler quoi que ce soit sur cet écran où vous souhaitez quitter
l'application.

Important: Ceci ne devrait être qu'un écran sur la pile.

Lire Android - Bouton Retour de matériel en ligne: [Link]

native/topic/4668/android---bouton-retour-de-materiel

[Link] 21
Chapitre 3: API d'animation
Examples
Animer une image

class AnimatedImage extends Component {

constructor(props){
super(props)
[Link] = {
logoMarginTop: new [Link](200)
}
}
componentDidMount(){
[Link](
[Link],
{ toValue: 100 }
).start()
}
render () {
return (
<View>
<[Link] source={require('../images/[Link]')} style={[[Link], {
marginTop: [Link]
}]} />
</View>
)
}
}

Cet exemple anime la position de l'image en modifiant la marge.

Lire API d'animation en ligne: [Link]

[Link] 22
Chapitre 4: Bonjour le monde
Examples
Modification de [Link] ou [Link]

Ouvrez [Link] ou [Link] et supprimez tout ce qui se trouve entre <View> </View> .
Après cela, écrivez <Text> Hello World! </Text> et lancez l'émulateur.

Vous devriez voir Hello World! écrit à l'écran!

Félicitations! Vous avez écrit avec succès votre premier Hello World!

Bonjour le monde!

import React, { Component } from 'react';

import { AppRegistry, Text } from 'react-native';

class HelloWorldApp extends Component {

render() {
return (
<Text>Hello world!</Text>
);
}
}

[Link]('HelloWorldApp', () => HelloWorldApp);

Lire Bonjour le monde en ligne: [Link]

[Link] 23
Chapitre 5: Coiffant
Introduction
Les styles sont définis dans un objet JSON avec des noms d'attributs de style similaires, comme
dans CSS. Un tel objet peut soit être mis en ligne dans le style prop d'un composant, soit être
transmis à la fonction [Link](StyleObject) et être stocké dans une variable pour un
accès en ligne plus court en utilisant un nom de sélecteur similaire à une classe. en CSS.

Syntaxe
• <Component style={styleFromStyleSheet} />
• <Component style={styleObject} />
• <Component style={[style1,style2]} />

Remarques
La plupart des styles React Native sont leurs formulaires CSS, mais dans un cas camel. Ainsi, la
text-decoration devient textDecoration .

Contrairement aux CSS, les styles ne sont pas hérités. Si vous souhaitez que les composants
enfants héritent d'un certain style, vous devez le fournir explicitement à l'enfant. Cela signifie que
vous ne pouvez pas définir une famille de polices pour une View entière.
La seule exception à cette règle est le composant Text : les Text imbriqués héritent de leurs styles
parents.

Examples
Style utilisant des styles en ligne

Chaque composant React Native peut prendre un accessoire de style . Vous pouvez lui
transmettre un objet JavaScript avec des propriétés de style CSS:

<Text style={{color:'red'}}>Red text</Text>

Cela peut être inefficace car il doit recréer l'objet chaque fois que le composant est rendu. Utiliser
une feuille de style est préférable.

Styling à l'aide d'une feuille de style

import React, { Component } from 'react';

import { View, Text, StyleSheet } from 'react-native';

const styles = [Link]({

red: {

[Link] 24
 color: 'red'
},
big: {
fontSize: 30
}
});

class Example extends Component {

render() {
return (
<View>
<Text style={[Link]}>Red</Text>
<Text style={[Link]}>Big</Text>
</View>
);
}
}

[Link]() renvoie un objet dont les valeurs sont des nombres. React Native sait
convertir ces identifiants numériques en objet de style correct.

Ajouter plusieurs styles

Vous pouvez passer un tableau au style prop pour appliquer plusieurs styles. En cas de conflit, le
dernier de la liste est prioritaire.

import React, { Component } from 'react';

import { View, Text, StyleSheet } from 'react-native';

const styles = [Link]({

red: {
color: 'red'
},
greenUnderline: {
color: 'green',
textDecoration: 'underline'
},
big: {
fontSize: 30
}
});

class Example extends Component {

render() {
return (
<View>
<Text style={[[Link], [Link]]}>Big red</Text>
<Text style={[[Link], [Link]]}>Green underline</Text>
<Text style={[[Link], [Link]]}>Red underline</Text>
<Text style={[[Link], [Link], [Link]]}>Big red
underline</Text>
<Text style={[[Link], {color:'yellow'}]}>Big yellow</Text>
</View>
);
}
}

[Link] 25
Styling conditionnel

<View style={[([Link]) ? [Link] : [Link]]}>

Si la valeur de isTrue est true , la couleur de fond noire sera blanche.

Lire Coiffant en ligne: [Link]

[Link] 26
Chapitre 6: Composants
Examples
Composant de base

import React, { Component } from 'react'

import { View, Text, AppRegistry } from 'react-native'

class Example extends Component {

render () {
return (
<View>
<Text> I'm a basic Component </Text>
</View>
)
}
}

[Link]('Example', () => Example)

Composant avec état

Ces composants auront des états changeants.

import React, { Component } from 'react'

import { View, Text, AppRegistry } from 'react-native'

class Example extends Component {

constructor (props) {
super(props)
[Link] = {
name: "Sriraman"
}
}
render () {
return (
<View>
<Text> Hi, {[Link]}</Text>
</View>
)
}
}

[Link]('Example', () => Example)

Composant sans état

Comme leur nom l'indique, les composants sans état n'ont aucun état local. Ils sont également
appelés composants Dumb . Sans aucun état local, ces composants n'ont pas besoin de
méthodes de cycle de vie ou de la plupart des méthodes utilisées avec un composant avec état.

[Link] 27
La syntaxe de classe n'est pas obligatoire, vous pouvez simplement faire const name = ({props})
=> ( ... ) . En règle générale, les composants sans état sont plus concis.

Ci-dessous se trouve un exemple de deux composants sans état App et Title , avec une
démonstration de passerelles entre les composants:

import React from 'react'

import { View, Text, AppRegistry } from 'react-native'

const Title = ({Message}) => (

<Text>{Message}</Text>
)

const App = () => (

<View>
<Title title='Example Stateless Component' />
</View>
)

[Link]('App', () => App)

C'est le modèle recommandé pour les composants, si possible. Comme dans le futur, des
optimisations peuvent être faites pour ces composants, réduisant les allocations de mémoire et les
vérifications inutiles.

Lire Composants en ligne: [Link]

[Link] 28
Chapitre 7: Créer un partageable APK pour
Android
Introduction
Étapes pour créer un APK (signé et non signé) que vous pouvez installer sur un périphérique à
l'aide de l'interface de ligne de commande et partager également:

Énoncé du problème: J'ai créé mon application, je peux l'exécuter sur mon émulateur local (et
aussi sur mon appareil Android en modifiant le serveur de débogage). Mais, je veux créer un
fichier apk que je peux envoyer à quelqu'un sans accès au serveur de développement et je veux
qu'il soit capable de tester l'application.

Remarques
Une description plus détaillée est également mentionnée ici: [Link]
native/docs/[Link]

Examples
Créer une clé pour signer l'APK

keytool -genkey -v -keystore [Link] -alias my-app-alias -keyalg RSA -keysize 2048
-validity 10000

Utilisez un mot de passe lorsque vous y êtes invité

Une fois la clé générée, utilisez-la pour générer la version installable:

react-native bundle --platform android --dev false --entry-file [Link] \

--bundle-output android/app/src/main/assets/[Link] \
--assets-dest android/app/src/main/res/

Générer la construction en utilisant gradle

cd android && ./gradlew assembleRelease

Télécharger ou partager le fichier APK généré

Téléchargez le fichier APK sur votre téléphone. L'indicateur -r remplacera l'application existante (si
elle existe)

adb install -r ./app/build/outputs/apk/[Link]

[Link] 29
L'API signable partageable se trouve à:

./app/build/outputs/apk/[Link]

Lire Créer un partageable APK pour Android en ligne: [Link]

native/topic/8964/creer-un-partageable-apk-pour-android

[Link] 30
Chapitre 8: Disposition
Examples
Flexbox

Flexbox est un mode de mise en page permettant la disposition des éléments sur une page de
manière à ce que les éléments se comportent de manière prévisible lorsque la mise en page doit
prendre en charge différentes tailles d’écran et différents périphériques d’affichage. Par défaut,
flexbox organise les enfants dans une colonne. Mais vous pouvez le changer en ligne en utilisant
flexDirection: 'row' .

flexDirection

const Direction = (props)=>{

return (
<View style={[Link]}>
<Box/>
<Box/>
<Box/>
<View style={{flexDirection:'row'}}>
<Box/>
<Box/>
<Box/>
</View>
</View>
)
}

const styles = [Link]({

container: {
flex:1,
backgroundColor: '#AED581',
}
});

[Link] 31
Axe d'alignement

const AlignmentAxis = (props)=>{

return (
<View style={[Link]}>
<Box />
<View style={{flex:1, alignItems:'flex-end', justifyContent:'flex-end'}}>
<Box />
<Box />
</View>
<Box />
</View>
)
}

const styles = [Link]({

container: {
flex:1,
backgroundColor: `#69B8CC`,
},
text:{
color: 'white',
textAlign:'center'
}

[Link] 32
 });

[Link] 33
[Link] 34
Chapitre 9: ESLint in react-native
Introduction
Ceci est le sujet de l'explication des règles ESLint pour rea-native.

Examples
Comment commencer

Il est fortement recommandé d'utiliser ESLint dans votre projet sur rea-native. ESLint est un outil
de validation de code utilisant des règles spécifiques fournies par la communauté.

Pour rea-native, vous pouvez utiliser des ensembles de règles pour JavaScript, réagir et réagir de
manière native.

Les règles communes ESLint avec motivation et explications pour javascript, vous pouvez trouver
ici: [Link] . Vous pouvez simplement ajouter un jeu
de règles prêt à l'emploi à partir des développeurs ESLint en ajoutant votre fichier .[Link] au
noeud 'extend' 'eslint: recommended'. ("extend": ["eslint: recommended"]) Pour en savoir plus sur
la configuration d'ESLint, vous pouvez lire ici: [Link]
environment . Il est recommandé de lire la documentation complète sur cet outil extrêmement
utile.

Ensuite, des documents complets sur les règles pour ES Lint réagissent au plug-in que vous
pouvez trouver ici: [Link] . Note
importante: toutes les règles de réaction ne sont pas relatives à la réaction native. Par exemple:
react / display-name et react / no-unknown-property par exemple. Une autre règle est 'must have'
pour chaque projet sur react-native, tel que react / jsx-no-bind et react / jsx-key.

Soyez très prudent en choisissant votre propre jeu de règles.

Et finalement, il existe un plugin explicite pour rea-native: [Link]

plugin-react-native Remarque: Si vous divisez vos styles dans un fichier séparé, la règle rea-
native / no-inline- les styles ne fonctionneront pas.

Pour que cet outil fonctionne correctement dans env-native env, vous devrez peut-être définir
value ou "env" dans votre configuration: "env": {"browser": true, "es6": true, "amd": true} ,

ESLint est un outil clé pour le développement de produits de haute qualité.

Lire ESLint in react-native en ligne: [Link]

native

[Link] 35
Chapitre 10: Etat
Syntaxe
• void setState (fonction | objet nextState, [rappel de fonction])

Examples
setState

Pour modifier la vue dans votre application, vous pouvez utiliser setState - cela restituera votre
composant et tous ses composants enfants. setState effectue une fusion superficielle entre l'état
nouveau et précédent et déclenche un re-render du composant.

setState prend soit un objet clé-valeur, soit une fonction qui retourne un objet clé-valeur

Objet clé-valeur

[Link]({myKey: 'myValue'});

Fonction

L'utilisation d'une fonction est utile pour mettre à jour une valeur basée sur l'état ou les
accessoires existants.

[Link]((previousState, currentProps) => {

return {
myInteger: [Link]+1
}
})

Vous pouvez également transmettre un rappel facultatif à setState qui sera déclenché lorsque le
composant sera restitué avec le nouvel état.

[Link]({myKey: 'myValue'}, () => {

// Component has re-rendered... do something amazing!
));

Exemple complet
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View, TouchableOpacity } from 'react-native';

export default class MyParentComponent extends Component {

constructor(props) {
super(props);

[Link] 36
 [Link] = {
myInteger: 0
}

}
getRandomInteger() {
const randomInt = [Link]([Link]()*100);

[Link]({
myInteger: randomInt
});

}
incrementInteger() {

[Link]((previousState, currentProps) => {

return {
myInteger: [Link]+1
}
});

}
render() {

return <View style={[Link]}>

<Text>Parent Component Integer: {[Link]}</Text>

<MyChildComponent myInteger={[Link]} />

<Button label="Get Random Integer" onPress={[Link](this)} />

<Button label="Increment Integer" onPress={[Link](this)} />

</View>

}
}

export default class MyChildComponent extends Component {

constructor(props) {
super(props);
}
render() {

// this will get updated when "MyParentComponent" state changes

return <View>
<Text>Child Component Integer: {[Link]}</Text>
</View>

}
}

export default class Button extends Component {

constructor(props) {
super(props);
}
render() {

return <TouchableOpacity onPress={[Link]}>

<View style={[Link]}>

[Link] 37
 <Text style={[Link]}>{[Link]}</Text>
</View>
</TouchableOpacity>

}
}

const styles = [Link]({

container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
button: {
backgroundColor: '#444',
padding: 10,
marginTop: 10
},
buttonText: {
color: '#fff'
}
});

[Link]('MyApp', () => MyParentComponent);

Initialiser l'état

Vous devez initialiser l'état dans la fonction constructeur de votre composant comme ceci:

export default class MyComponent extends Component {

constructor(props) {
super(props);

[Link] = {
myInteger: 0
}
}
render() {
return (
<View>
<Text>Integer: {[Link]}</Text>
</View>
)
}
}

En utilisant setState, on peut mettre à jour la vue.

Lire Etat en ligne: [Link]

[Link] 38
Chapitre 11: Exécuter une application sur
l'appareil (version Android)
Remarques
Dépannage:
Could not connect to development server => Procédez comme adb reverse tcp:8081 tcp:8081 : adb
reverse tcp:8081 tcp:8081 , assurez-vous que votre téléphone est connecté (périphériques adb).
Vérifiez également qu'un serveur local est lancé, sinon lancez react-native start

Examples
Lancer une application sur un appareil Android.
1. adb devices
• Votre téléphone est-il affiché? Sinon, activez le mode développeur sur votre téléphone
et connectez-le par USB.
2. adb reverse tcp:8081 tcp:8081 :
• Afin de relier correctement votre téléphone et que React-Native le reconnaisse
pendant la construction. ( REMARQUE: Android Version 5 ou supérieure. )
3. react-native run-android :
• Pour exécuter l'application sur votre téléphone.
4. react-native start :
• Afin de démarrer un serveur local pour le développement (obligatoire). Ce serveur est
automatiquement lancé si vous utilisez la dernière version de React-native.

Lire Exécuter une application sur l'appareil (version Android) en ligne:

[Link]
android-

[Link] 39
Chapitre 12: Images
Examples
Module d'image

Vous allez devoir importer Image partir du package react-native , alors utilisez-le:

import { Image } from 'react';

<Image source={{uri: '[Link] />

Vous pouvez également utiliser une image locale avec une syntaxe légèrement différente mais
avec la même logique:

import { Image } from 'react';

<Image source={require('./img/[Link]')} />

Note: - Vous devriez donner de la hauteur, de la largeur à l'image sinon elle ne sera pas visible.

Exemple d'image

class ImageExample extends Component {

render() {
return (
<View>
<Image style={{width: 30, height: 30}}
source={{uri: '[Link]
/>
</View>
);
}
}

Source d'image conditionnelle

<Image style={[[Link]]}
source={[Link]
? [Link]
: require('../theme/images/[Link]')}
/>

Si le chemin est disponible dans imagePath il sera assigné à la source sinon le chemin d’image par
défaut sera assigné.

Utilisation d'une variable pour le chemin de l'image

[Link] 40
 let imagePath = require("../../assets/[Link]");

<Image style={{height: 50, width: 50}} source={imagePath} />

De la ressource externe:

<Image style={{height: 50, width: 50}} source={{uri: [Link]}} />

Pour adapter une image

<Image
resizeMode="contain"
style={{height: 100, width: 100}}
source={require('../assets/[Link]')} />

Essayez également de couvrir , d' étirer , de répéter et de centrer les paramètres.

Lire Images en ligne: [Link]

[Link] 41
Chapitre 13: Instructions en ligne de
commande
Examples
Vérifier la version installée

$ react-native -v

Exemple de sortie

react-native-cli: 0.2.0
react-native: n/a - not inside a React Native project directory //Output from different
folder
react-native: react-native: 0.30.0 // Output from the react native project directory

Mettre à niveau le projet existant vers la dernière version RN

Dans le dossier app, recherchez [Link] et modifiez la ligne suivante pour inclure la dernière
version, enregistrez le fichier et fermez-le.

"react-native": "0.32.0"

Dans le terminal:

$ npm install

Suivi par

$ react-native upgrade

Enregistrement

Android

$ react-native log-android

iOS

$ react-native log-ios

Initialiser et démarrer avec le projet React Native

[Link] 42
Pour initialiser

react-native init MyAwesomeProject

Pour initialiser avec une version spécifique de React Native

react-native init --version="0.36.0" MyAwesomeProject

Pour courir pour Android

cd MyAwesomeProject
react-native run-android

Pour exécuter pour iOS

cd MyAwesomeProject
react-native run-ios

Démarrer React Native Packager

$ react-native start

Sur la dernière version de React Native, il n'est pas nécessaire d'exécuter le conditionneur. Il
fonctionnera automatiquement.

Par défaut, le serveur démarre sur le port 8081. Pour spécifier le port sur lequel le serveur est
installé

$ react-native start --port PORTNUMBER

Ajouter un projet Android pour votre application

Si vous avez soit des applications générées avec le support pré-Android, soit vous les avez faites
exprès, vous pouvez toujours ajouter un projet Android à votre application.

$ react-native android

Cela générera un dossier android et [Link] intérieur de votre application.

Lire Instructions en ligne de commande en ligne: [Link]

native/topic/2117/instructions-en-ligne-de-commande

[Link] 43
Chapitre 14: Intégration avec Firebase pour
l'authentification
Introduction
// Remplacez les valeurs de la base de feu par les valeurs de votre application api importez la
base de données depuis 'firebase';

componentWillMount () {[Link] ({apiKey: "yourAPIKey", authDomain:

"authDomainNAme", databaseURL: "yourDomainBaseURL", ID du projet: "yourProjectID",
storageBucket: "storageBUcketValue", messagingSenderId: "senderIdValue"}); [Link] ().
signInWithEmailAndPassword (email, mot de passe) .then ([Link])})}

Examples
React Native - ListView avec Firebase

C'est ce que je fais lorsque je travaille avec Firebase et que je veux utiliser ListView.

Utilisez un composant parent pour récupérer les données de Firebase ([Link]):

[Link]

import PostsList from './PostsList';

class Posts extends Component{

constructor(props) {
super(props);
[Link] = {
posts: []
}
}

componentWillMount() {
[Link]().ref('Posts/').on('value', function(data) {
[Link]({ posts: [Link]() });
});
}

render() {
return <PostsList posts={[Link]}/>
}
}

[Link]

class PostsList extends Component {

constructor(props) {
super(props);

[Link] 44
 [Link] = {
dataSource: new [Link]({
rowHasChanged: (row1, row2) => row1 !== row2
}),
}
}

getDataSource(posts: Array<any>): [Link] {

if(!posts) return;
return [Link](posts);
}

componentDidMount() {
[Link]({dataSource: [Link]([Link])});
}

componentWillReceiveProps(props) {
[Link]({dataSource: [Link]([Link])});
}

renderRow = (post) => {

return (
<View>
<Text>{[Link]}</Text>
<Text>{[Link]}</Text>
</View>
);
}

render() {
return(
<ListView
dataSource={[Link]}
renderRow={[Link]}
enableEmptySections={true}
/>
);
}
}

Je tiens à souligner que dans [Link] , je [Link] pas de firebase car il vous suffit de l'importer
une fois, dans le composant principal de votre projet (où se trouve le navigateur) et de l'utiliser
n'importe où.

C'est la solution que quelqu'un a suggérée dans une question que j'ai posée quand je me
débattais avec ListView. Je pensais que ce serait bien de le partager.

Source: [ [Link]
from-firebase][1]

Authentification dans React Native avec Firebase

Remplacez les valeurs de la base de feu par les valeurs de votre application api:

import firebase from 'firebase';

componentWillMount() {
[Link]({

[Link] 45
 apiKey: "yourAPIKey",
authDomain: "authDomainNAme",
databaseURL: "yourDomainBaseURL",
projectId: "yourProjectID",
storageBucket: "storageBUcketValue",
messagingSenderId: "senderIdValue"
});
[Link]().signInWithEmailAndPassword(email, password)
.then([Link])
.catch(() => {
[Link]().createUserWithEmailAndPassword(email, password)
.then([Link])
.catch([Link])
})
}

Lire Intégration avec Firebase pour l'authentification en ligne: [Link]

native/topic/6391/integration-avec-firebase-pour-l-authentification

[Link] 46
Chapitre 15: Le débogage
Syntaxe
• débogueur

Examples
Démarrez le débogage JS à distance dans Android

Vous pouvez démarrer le débogage à distance à partir du menu Developer. Après avoir
sélectionné l'option Déboguer à distance, il ouvrira Google Chrome, afin que vous puissiez
enregistrer la sortie dans votre console. Vous pouvez également écrire la syntaxe du débogueur
dans votre code js.

Utiliser [Link] ()

Vous pouvez imprimer le message de journal dans le terminal en utilisant [Link]() . Pour ce
faire, ouvrez un nouveau terminal et exécutez la commande suivante pour Android:

react-native log-android

ou suivant la commande si vous utilisez iOS:

react-native log-ios

Vous allez maintenant commencer à voir tout le message de journal dans ce terminal

Lire Le débogage en ligne: [Link]

[Link] 47
Chapitre 16: Le routage
Introduction
Le routage ou la navigation permet des applications entre différents écrans. Son vital pour une
application mobile car il fournit un contexte à l'utilisateur sur l'endroit où il se trouve, dissocie les
actions de l'utilisateur entre les écrans et se déplace entre eux, fournit une machine d'état comme
le modèle de l'application entière.

Examples
Composant Navigateur

Navigator fonctionne pour iOS et Android.

import React, { Component } from 'react';

import { Text, Navigator, TouchableHighlight } from 'react-native';

export default class NavAllDay extends Component {

render() {
return (
<Navigator
initialRoute={{ title: 'Awesome Scene', index: 0 }}
renderScene={(route, navigator) =>
<Text>Hello {[Link]}!</Text>
}
style={{padding: 100}}
/>
);
}
}

Les itinéraires vers le Navigator sont fournis sous forme d'objets. Vous fournissez également une
fonction renderScene qui rend la scène pour chaque objet route. initialRoute est utilisé pour
spécifier le premier itinéraire.

Lire Le routage en ligne: [Link]

[Link] 48
Chapitre 17: Les accessoires
Introduction
Les accessoires ou propriétés sont des données transmises aux composants enfants dans une
application React. Les composants React rendent les éléments d'interface utilisateur basés sur
leurs accessoires et leur état interne. Les accessoires qu'un composant prend (et utilise) définit
comment il peut être contrôlé de l'extérieur.

Examples
Quels sont les accessoires?

Les accessoires permettent de transférer des données d'un composant parent à un composant
enfant. Les accessoires sont en lecture seule. Le composant enfant peut uniquement obtenir les
propriétés transmises par le parent en utilisant [Link] . En utilisant des
accessoires, on peut rendre son composant réutilisable.

Utilisation des accessoires

Une fois l'installation terminée. Copiez le code ci-dessous dans [Link] ou dans le fichier
[Link] pour utiliser les accessoires.

import React, { Component } from 'react';

import { AppRegistry, Text, View } from 'react-native';

class Greeting extends Component {

render() {
return (
<Text>Hello {[Link]}!</Text>
);
}
}

class LotsOfGreetings extends Component {

render() {
return (
<View style={{alignItems: 'center'}}>
<Greeting name='Rexxar' />
<Greeting name='Jaina' />
<Greeting name='Valeera' />
</View>
);
}
}

[Link]('LotsOfGreetings', () => LotsOfGreetings);

En utilisant des accessoires, on peut rendre son composant générique. Par exemple, vous avez
un composant Button. Vous pouvez transmettre différents accessoires à ce composant afin de

[Link] 49
pouvoir placer ce bouton n'importe où dans sa vue.

source: Props-React Native

PropTypes

Le package prop-types vous permet d'ajouter une vérification de type à l'exécution à votre
composant pour vous assurer que les types des accessoires transmis au composant sont
corrects. Par exemple, si vous ne transmettez pas un name ou isYummy prop au composant ci-
dessous, une erreur se produira en mode développement. En mode production, les vérifications
de type prop ne sont pas effectuées. La définition de propTypes peut rendre votre composant plus
lisible et maintenable.

import React, { Component } from 'react';

import PropTypes from 'prop-types';
import { AppRegistry, Text, View } from 'react-native';

import styles from './[Link]';

class Recipe extends Component {

static propTypes = {
name: [Link],
isYummy: [Link]
}
render() {
return (
<View style={[Link]}>
<Text>{[Link]}</Text>
{[Link] ? <Text>THIS RECIPE IS YUMMY</Text> : null}
</View>
)
}
}

[Link]('Recipe', () => Recipe);

// Using the component

<Recipe name="Pancakes" isYummy={true} />

Plusieurs PropTypes

Vous pouvez également avoir plusieurs propTypes pour un des accessoires. Par exemple, le nom
des accessoires que je prends peut aussi être un objet, je peux l'écrire comme.

static propTypes = {
name: [Link]([
[Link],
[Link]
])
}

Accessoires pour enfants

Il y a aussi des accessoires spéciaux appelés children , qui ne sont pas transmis comme

[Link] 50
 <Recipe children={something}/>

Au lieu de cela, vous devriez le faire

<Recipe>
<Text>Hello React Native</Text>
</Recipe>

alors vous pouvez le faire dans le rendu de la recette:

return (
<View style={[Link]}>
{[Link]}
{[Link] ? <Text>THIS RECIPE IS YUMMY</Text> : null}
</View>
)

Vous aurez un composant <Text> dans votre Recipe disant Hello React Native , plutôt cool hum?

Et le propType des enfants est

children: [Link]

Accessoires par défaut

defaultProps vous permet de définir des valeurs par défaut pour votre composant. Dans l'exemple
ci-dessous si vous ne passez pas le nom props, il affichera John sinon il affichera la valeur passée

class Example extends Component {

render() {
return (
<View>
<Text>{[Link]}</Text>
</View>
)
}
}

[Link] = {
name: 'John'
}

Lire Les accessoires en ligne: [Link]

[Link] 51
Chapitre 18: Liaison de l'API native
Introduction
L'API de liaison vous permet d'envoyer et de recevoir des liens entre les applications. Par
exemple, ouvrez l'application Téléphone avec le numéro composé ou ouvrez Google Maps et
lancez une navigation vers la destination choisie. Vous pouvez également utiliser Linking pour que
votre application puisse répondre aux liens qui l’ouvrent depuis d’autres applications.

Pour utiliser Linking vous devez d'abord l'importer depuis react-native

import {Linking} from 'react-native'

Examples
Liens sortants

Pour ouvrir un appel de lien openURL.

[Link](url)
.catch(err => [Link]('An error occurred ', err))

La méthode préférée consiste à vérifier si une application installée peut gérer une URL donnée au
préalable.

[Link](url)
.then(supported => {
if (!supported) {
[Link]('Unsupported URL: ' + url)
} else {
return [Link](url)
}
}).catch(err => [Link]('An error occurred ', err))

Schémas d'URI
Application cible Exemple Référence

Navigateur Web [Link]

Téléphone [Link] Pomme

Courrier [Link] Pomme

SMS [Link] Pomme

[Link] 52
 Application cible Exemple Référence

Apple Maps [Link] Pomme

Google Maps geo:37.7749,-122.4194 Google

iTunes Voir iTunes Link Maker Pomme

Facebook fb://profile Débordement de pile

Youtube [Link] Pomme

Facetime facetime://user@[Link] Pomme

Calendrier iOS calshow:514300000 [1] iPhoneDevWiki

[1] Ouvre le calendrier au nombre de secondes indiqué depuis le 1. 1. 2001 (UTC?). Pour une
raison quelconque, cette API n'est pas documentée par Apple.

Liens entrants

Vous pouvez détecter le lancement de votre application à partir d'une URL externe.

componentDidMount() {
const url = [Link]()
.then((url) => {
if (url) {
[Link]('Initial url is: ' + url)
}
}).catch(err => [Link]('An error occurred ', err))
}

Pour activer cela sur iOS Link RCTLinking à votre projet .

Pour activer cela sur Android, procédez comme suit .

Lire Liaison de l'API native en ligne: [Link]

api-native

[Link] 53
Chapitre 19: ListView
Examples
Exemple simple

ListView - Composant central conçu pour un affichage efficace des listes de données
changeantes défilant verticalement. L'API minimale consiste à créer un [Link], à le
remplir avec un simple tableau de blobs de données et à instancier un composant ListView avec
cette source de données et un rappel renderRow qui prend un blob du tableau de données et
renvoie un composant rendu.

Exemple minimal:

getInitialState: function() {
var ds = new [Link]({rowHasChanged: (r1, r2) => r1 !== r2});
return {
dataSource: [Link](['row 1', 'row 2']),
};
},

render: function() {
return (
<ListView
dataSource={[Link]}
renderRow={(rowData) => <Text>{rowData}</Text>}
/>
);
},

ListView prend également en charge des fonctionnalités plus avancées, notamment des sections
avec des en-têtes de sections, des en-têtes et des pieds de page, des rappels à la fin des
données disponibles (onEndReached) et l'ensemble des lignes visibles dans onport change
plusieurs optimisations de performances.

Il y a quelques opérations de performance conçues pour que ListView défile en douceur tout en
chargeant dynamiquement des ensembles de données potentiellement très volumineux (ou
conceptuellement infinis):

• Ne restituez que les lignes modifiées - la fonction rowHasChanged fournie à la source de

données indique à ListView si elle doit redéfinir une ligne car les données source ont été
modifiées - voir ListViewDataSource pour plus de détails.
• Rendu de ligne limité par le débit - Par défaut, une seule ligne est rendue par boucle
d'événement (personnalisable avec le prop de pageSize). Cela divise le travail en morceaux
plus petits afin de réduire les risques de suppression d'images lors du rendu des lignes.

Lire ListView en ligne: [Link]

[Link] 54
Chapitre 20: Meilleures pratiques de rendu
Introduction
Sujet pour des notes importantes sur le comportement spécifique de la méthode
[Link].

Examples
Fonctions dans JSX

Pour de meilleures performances, il est important d'éviter d'utiliser la fonction array (lambda) dans
JSX.

Comme expliqué à l' adresse [Link]

react/blob/master/docs/rules/[Link] :

Un appel de liaison ou une fonction de flèche dans un accessoire JSX créera une
nouvelle fonction sur chaque rendu. Cela est mauvais pour les performances, car le
récupérateur de mémoire sera plus sollicité que nécessaire. Cela peut également
entraîner des rendus inutiles si une nouvelle fonction est transmise en tant que prop à
un composant qui utilise la vérification d'égalité de référence sur le prop pour
déterminer s'il doit être mis à jour.

Donc, si jsx bloque le code comme ceci:

<TextInput
onChangeValue={ value => [Link](value) }
/>

ou

<button onClick={ [Link](this) }></button>

vous pouvez le rendre meilleur:

<TextInput
onChangeValue={ [Link] }
/>

et

<button onClick={ [Link] }></button>

Pour un contexte correct dans la fonction handleValueChanging, vous pouvez l'appliquer dans le
constructeur du composant:

[Link] 55
 constructor(){
[Link] = [Link](this)
}

plus en liant une fonction passée à un composant

Ou vous pouvez utiliser des solutions comme celle-ci: [Link]

decorator et ajouter simplement @autobind decorator à chaque méthode à laquelle vous
souhaitez vous connecter:

@autobind
handleValueChanging(newValue)
{
//processing event
}

Lire Meilleures pratiques de rendu en ligne: [Link]

native/topic/10649/meilleures-pratiques-de-rendu

[Link] 56
Chapitre 21: Meilleures pratiques du
navigateur
Examples
Navigateur

Navigator est le navigateur par défaut de React Native. Un composant Navigator gère une pile
d'objets route et fournit des méthodes pour gérer cette pile.

<Navigator
ref={(navigator) => { [Link] = navigator }}
initialRoute={{ id: 'route1', title: 'Route 1' }}
renderScene={[Link](this)}
configureScene={(route) => [Link]}
style={{ flex: 1 }}
navigationBar={
// see "Managing the Navigation Bar" below
<[Link] routeMapper={[Link]} />
}
/>

Gestion de la pile de route

Tout d’abord, notez l’accessoire initialRoute . Une route est simplement un objet javascript, et
peut prendre la forme que vous voulez et avoir les valeurs que vous voulez. C'est la principale
manière de transmettre des valeurs et des méthodes entre les composants de votre pile de
navigation.

Le Navigator sait quoi restituer en fonction de la valeur renvoyée par son outil renderScene .

renderScene(route, navigator) {
if ([Link] === 'route1') {
return <ExampleScene navigator={navigator} title={[Link]} />; // see below
} else if ([Link] === 'route2') {
return <ExampleScene navigator={navigator} title={[Link]} />; // see below
}
}

Imaginons une implémentation de ExampleScene dans cet exemple:

function ExampleScene(props) {

function forward() {
// this route object will passed along to our `renderScene` function we defined above.
[Link]({ id: 'route2', title: 'Route 2' });
}

function back() {
// `pop` simply pops one route object off the `Navigator`'s stack

[Link] 57
 [Link]();
}

return (
<View>
<Text>{[Link]}</Text>
<TouchableOpacity onPress={forward}>
<Text>Go forward!</Text>
</TouchableOpacity>
<TouchableOpacity onPress={back}>
<Text>Go Back!</Text>
</TouchableOpacity>
</View>
);
}

Configuration du navigateur

Vous pouvez configurer les transitions du Navigator avec le composant configureScene . Ceci est
une fonction qui a passé l'objet route et doit retourner un objet de configuration. Voici les objets de
configuration disponibles:

• [Link] (par défaut)

• [Link]
• [Link]
• [Link]
• [Link]
• [Link]
• [Link]
• [Link]
• [Link]
• [Link]

Vous pouvez renvoyer l'un de ces objets sans modification ou modifier l'objet de configuration
pour personnaliser les transitions de navigation. Par exemple, pour modifier la largeur des
UINavigationController aux bords pour émuler plus étroitement le UINavigationController
interactivePopGestureRecognizer UINavigationController iOS:

configureScene={(route) => {
return {
...[Link],
gestures: {
pop: {
...[Link],
edgeHitWidth: [Link]('window').width / 2,
},
},
};
}}

Gestion de la barre de navigation

Le composant Navigator est fourni avec un élément de navigationBar qui peut théoriquement

[Link] 58
prendre tout composant React correctement configuré. Mais l'implémentation la plus courante
utilise le [Link] par défaut. Cela prend un accessoire de routeMapper que vous
pouvez utiliser pour configurer l'apparence de la barre de navigation en fonction de l'itinéraire.

Un routeMapper est un objet JavaScript classique avec trois fonctions: Title , RightButton et
LeftButton . Par exemple:

const routeMapper = {

LeftButton(route, navigator, index, navState) {

if (index === 0) {
return null;
}

return (
<TouchableOpacity
onPress={() => [Link]()}
style={[Link]}
>
<Text>Back</Text>
</TouchableOpacity>
);
},

RightButton(route, navigator, index, navState) {

return (
<TouchableOpacity
onPress={[Link]}
style={[Link]}
>
<Text>Next</Text>
</TouchableOpacity>
);
},

Title(route, navigator, index, navState) {

return (
<Text>
{[Link]}
</Text>
);
},
};

Voir plus

Pour une documentation plus détaillée de chaque accessoire, consultez la documentation officielle
React pour Navigator et le guide React Native sur l' utilisation des navigateurs .

Utiliser rea-navigation pour naviguer dans les applications natives de réaction

Avec l'aide de react-navigation , vous pouvez ajouter très facilement la navigation à votre
application.

Installer react-navigation

[Link] 59
 npm install --save react-navigation

Exemple:

import { Button, View, Text, AppRegistry } from 'react-native';

import { StackNavigator } from 'react-navigation';

const App = StackNavigator({

FirstPage: {screen: FirstPage},
SecondPage: {screen: SecondPage},
});

class FirstPage extends [Link] {

static navigationOptions = {
title: 'Welcome',
};
render() {
const { navigate } = [Link];

return (
<Button
title='Go to Second Page'
onPress={() =>
navigate('SecondPage', { name: 'Awesomepankaj' })
}
/>
);
}
}

class SecondPage extends [Link] {

static navigationOptions = ({navigation}) => ({
title: [Link],
});

render() {
const { goBack } = [Link];
return (
<View>
<Text>Welcome to Second Page</Text>
<Button
title="Go back to First Page"
onPress={() => goBack()}
/>
</View>
);
}
}

Navigation ré-native avec react-native-router-flux

Installez en utilisant npm install --save react-native-router-flux

Dans rea-native-routeur-flux, chaque route est appelée <Scene>

<Scene key="home" component={LogIn} title="Home" initial />

key Chaîne unique pouvant être utilisée pour faire référence à la scène particulière.

[Link] 60
component Quel composant montrer, ici c'est

title faire un NavBar et lui donner un titre 'Home'

initial Est-ce le premier écran de l'application

Exemple:

import React from 'react';

import { Scene, Router } from 'react-native-router-flux';
import LogIn from './components/LogIn';
import SecondPage from './components/SecondPage';

const RouterComponent = () => {

return (
<Router>
<Scene key="login" component={LogIn} title="Login Form" initial />
<Scene key="secondPage" component={SecondPage} title="Home" />
</Router>
);
};

export default RouterComponent;

Importez ce fichier dans le fichier principal [Link] (fichier d'index) et rendez-le. Pour plus
d'informations, visitez ce lien .

Lire Meilleures pratiques du navigateur en ligne: [Link]

native/topic/2559/meilleures-pratiques-du-navigateur

[Link] 61
Chapitre 22: Modal
Introduction
Le composant modal est un moyen simple de présenter du contenu au-dessus d’une vue
englobante.

Paramètres

Soutenir détails

c'est un enum de (" none ", " slide ", " fade ") et il contrôle
animationType
l'animation modale.

visible c'est un bool qui contrôle la visibilité modale.

il permet de passer une fonction qui sera appelée une fois le

onShow
modal affiché.

transparent bool pour définir la transparence.

onRequestClose ( android il définit toujours une méthode qui sera appelée lorsque
) l'utilisateur retourne le bouton

onOrientationChange ( il définit toujours une méthode qui sera appelée lorsque

IOS ) l'orientation change

SupportedOrientations ( enum («portrait», «portrait à l'envers», «paysage», «paysage à

IOS ) gauche», «paysage à droite»)

Examples
Exemple de base modal

import React, { Component } from 'react';

import {
Modal,
Text,
View,
Button,
StyleSheet,
} from 'react-native';

const styles = [Link]({

mainContainer: {
marginTop: 22,
},

[Link] 62
 modalContainer: {
marginTop: 22,
},
});

class Example extends Component {

constructor() {
super();
[Link] = {
visibility: false,
};
}

setModalVisibility(visible) {
[Link]({
visibility: visible,
});
}

render() {
return (
<View style={[Link]}>
<Modal
animationType={'slide'}
transparent={false}
visible={[Link]}
>
<View style={[Link]}>
<View>
<Text>I'm a simple Modal</Text>
<Button
color="#000"
onPress={() => [Link](![Link])}
title="Hide Modal"
/>
</View>
</View>
</Modal>

<Button
color="#000"
onPress={() => [Link](true)}
title="Show Modal"
/>
</View>
);
}
}

export default Example;

Exemple modal transparent

Voir cet exemple ici .

import React, { Component } from 'react';

import { Text, View, StyleSheet, Button, Modal } from 'react-native';
import { Constants } from 'expo';

[Link] 63
 export default class App extends Component {
state = {
modalVisible: false,
};

_handleButtonPress = () => {
[Link](true);
};

setModalVisible = (visible) => {

[Link]({modalVisible: visible});
}

render() {
var modalBackgroundStyle = {
backgroundColor: 'rgba(0, 0, 0, 0.5)'
};
var innerContainerTransparentStyle = {backgroundColor: '#fff', padding: 20};
return (
<View style={[Link]}>
<Modal
animationType='fade'
transparent={true}
visible={[Link]}
onRequestClose={() => [Link](false)}
>
<View style={[[Link], modalBackgroundStyle]}>
<View style={innerContainerTransparentStyle}>
<Text>This is a modal</Text>
<Button title='close'
onPress={[Link](this, false)}/>
</View>
</View>
</Modal>
<Button
title="Press me"
onPress={this._handleButtonPress}
/>

</View>
);
}
}

const styles = [Link]({

container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingTop: [Link],
backgroundColor: '#ecf0f1',
}
});

Lire Modal en ligne: [Link]

[Link] 64
Chapitre 23: Module de plate-forme
Examples
Trouver le type / version du système d'exploitation

La première étape consiste à importer la plate-forme à partir du package «réagit nativement»

comme suit:

import { Platform } from 'react-native'

Après avoir fait cela, vous pouvez aller de l'avant et accéder au type de système d'exploitation via
[Link] vous permettant de l'utiliser dans des instructions conditionnelles comme

const styles = [Link]({

height: ([Link] === 'ios') ? 200 : 100,
})

Si vous souhaitez détecter la version Android, vous pouvez utiliser [Link] comme ceci:

if ([Link] === 21) {

[Link]('Running on Lollipop!');
}

Pour iOS, [Link] renvoie une chaîne, pour des conditions complexes, n'oubliez pas de
l'analyser.

if (parseInt([Link], 10) >= 9) {

[Link]('Running version higher than 8');
}

Si la logique spécifique à la plate-forme est complexe, il est possible de rendre deux fichiers
différents basés sur la plate-forme. Ex:

• [Link]
• [Link]

et l'exiger en utilisant

const MyTask = require('./MyTask')

Lire Module de plate-forme en ligne: [Link]

plate-forme

[Link] 65
Chapitre 24: Modules natifs
Examples
Créez votre module natif (IOS)

introduction
à partir de [Link]

Parfois, une application a besoin d'accéder à l'API de la plate-forme et React Native

n'a pas encore de module correspondant. Vous souhaitez peut-être réutiliser un code
Objective-C, Swift ou C ++ existant sans avoir à le réimplémenter en JavaScript ou
écrire du code multi-thread performant, tel que traitement d'image, base de données
ou nombre d'extensions avancées.

Un module natif est simplement une classe Objective-C qui implémente le protocole
RCTBridgeModule .

Exemple
Dans votre projet Xcode, créez un nouveau fichier et sélectionnez Cocoa Touch Class . Dans
l'assistant de création, choisissez un nom pour votre classe ( par exemple, NativeModule ), faites-
en une sous - classe de NSObject et choisissez Objective-C .

Cela créera deux fichiers NativeModuleEx.h et NativeModuleEx.m

Vous devrez importer RCTBridgeModule.h dans votre fichier NativeModuleEx.h comme suit:

#import <Foundation/Foundation.h>
#import "RCTBridgeModule.h"

@interface NativeModuleEx : NSObject <RCTBridgeModule>

@end

Dans votre NativeModuleEx.m ajoutez le code suivant:

#import "NativeModuleEx.h"

@implementation NativeModuleEx

RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(testModule:(NSString *)string )

[Link] 66
 {
NSLog(@"The string '%@' comes from JavaScript! ", string);
}

@end

RCT_EXPORT_MODULE() rendra votre module accessible en JavaScript, vous pouvez lui transmettre un
argument facultatif pour spécifier son nom. Si aucun nom n'est fourni, il correspondra au nom de
la classe Objective-C.

RCT_EXPORT_METHOD() exposera votre méthode à JavaScript, seules les méthodes que vous exportez
à l'aide de cette macro seront accessibles en JavaScript.

Enfin, dans votre JavaScript, vous pouvez appeler votre méthode comme suit:

import { NativeModules } from 'react-native';

var NativeModuleEx = [Link];

[Link]('Some String !');

Lire Modules natifs en ligne: [Link]

[Link] 67
Chapitre 25: Navigateur avec boutons
injectés depuis les pages
Examples
introduction

Au lieu de gonfler votre fichier js principal contenant votre navigateur avec des boutons. Il est plus
simple d'injecter des boutons à la demande dans n'importe quelle page dont vous avez besoin.

//In the page "Home", I want to have the right nav button to show
//a settings modal that resides in "Home" component.

componentWillMount() {
[Link] = "Home";

[Link] = {
text: "Settings",
onPress: this._ShowSettingsModal.bind(this)
};
}

Exemple complet commenté

'use strict';

import React, {Component} from 'react';

import ReactNative from 'react-native';

const {
AppRegistry,
StyleSheet,
Text,
View,
Navigator,
Alert,
TouchableHighlight
} = ReactNative;

//This is the app container that contains the navigator stuff

class AppContainer extends Component {

renderScene(route, navigator) {
switch([Link]) {
case "Home":
//You must pass route as a prop for this trick to work properly
return <Home route={route} navigator={navigator} {...[Link]} />
default:
return (
<Text route={route}
style={[Link]}>

[Link] 68
 Your route name is probably incorrect {[Link](route)}
</Text>
);
}
}

render() {
return (
<Navigator
navigationBar={
<[Link]
style={ [Link] }
routeMapper={ NavigationBarRouteMapper } />
}

initialRoute={{ name: 'Home' }}

renderScene={ [Link] }

/>
);
}
}

//Nothing fancy here, except for checking for injected buttons.

//Notice how we are checking if there are injected buttons inside the route object.
//Also, we are showing a "Back" button when the page is not at index-0 (e.g. not home)
var NavigationBarRouteMapper = {
LeftButton(route, navigator, index, navState) {
if([Link]) {
return (
<TouchableHighlight
style={[Link]}
underlayColor="transparent"
onPress={[Link]}>
<Text style={[Link]}>{[Link]}</Text>
</TouchableHighlight>
);
}
else if([Link]) {
return (
<TouchableHighlight
style={[Link]}
underlayColor="transparent"
onPress={() => [Link]() }>
<Text style={[Link]}>Back</Text>
</TouchableHighlight>
);
}
},
RightButton(route, navigator, index, navState) {
if([Link]) {
return (
<TouchableHighlight
style={[Link]}
underlayColor="transparent"
onPress={[Link]}>
<Text style={[Link]}>{[Link]}</Text>
</TouchableHighlight>
);
}

[Link] 69
 },
Title(route, navigator, index, navState) {
//You can inject the title aswell. If you don't we'll use the route name.
return (<Text style={[Link]}>{[Link] || [Link]}</Text>);
}
};

//This is considered a sub-page that navigator is showing

class Home extends Component {

//This trick depends on that componentWillMount fires before the navbar is created
componentWillMount() {
[Link] = "Home";

[Link] = {
text: "Button",
onPress: this._doSomething.bind(this)
};
}

//This method will be invoked by pressing the injected button.

_doSomething() {
[Link](
'Awesome, eh?',
null,
[
{text: 'Indeed'},
]
)
}

render() {
return (
<View style={[Link]}>
<Text>You are home</Text>
</View>
);
}
}

var styles = [Link]({

container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
marginTop: 66
},
navbar: {
backgroundColor: '#ffffff',
},
navbarTitle: {
marginVertical: 10,
fontSize: 17
},
leftNavButton: {
marginVertical: 10,
paddingLeft: 8,
},
rightNavButton: {
marginVertical: 10,

[Link] 70
 paddingRight: 8,
},
navbarButtonText: {
fontSize: 17,
color: "#007AFF"
}
});

[Link]('AppContainer', () => AppContainer);

Lire Navigateur avec boutons injectés depuis les pages en ligne: [Link]
native/topic/6416/navigateur-avec-boutons-injectes-depuis-les-pages

[Link] 71
Chapitre 26: Notification push
Introduction
Nous pouvons ajouter Push Notification pour réagir avec une application native en utilisant le
module npm react -native-push-notification par zo0r . Cela permet un développement multi-
plateforme.

Installation

npm install --save rea-native-push-notification

lien réactif

Remarques
Référez-vous à GitHub Repo de ce module pour plus de détails.

Examples
Push Setup Simple Setup

Créer un nouveau projet PushNotification

react-native init PushNotification

Mettez suivant dans [Link]

import React, { Component } from 'react';

import {
AppRegistry,
StyleSheet,
Text,
View,
Button
} from 'react-native';

import PushNotification from 'react-native-push-notification';

export default class App extends Component {

constructor(props){
super(props);

[Link] = [Link](this);
}

componentDidMount(){

[Link] 72
 [Link]({

// (required) Called when a remote or local notification is opened or received

onNotification: function(notification) {
[Link]( 'NOTIFICATION:', notification );
},

// Should the initial notification be popped automatically

// default: true
popInitialNotification: true,

/**
* (optional) default: true
* - Specified if permissions (ios) and token (android and ios) will requested or
not,
* - if not, you must call [Link]() later
*/
requestPermissions: true,
});

NewNotification(){

let date = new Date([Link]() + ([Link] * 1000));

//Fix for IOS

if([Link] == "ios"){
date = [Link]();
}

[Link]({
message: "My Notification Message", // (required)
date: date,// (optional) for setting delay
largeIcon:""// set this blank for removing large icon
//smallIcon: "ic_notification", // (optional) default: "ic_notification" with
fallback for "ic_launcher"
});
}

render() {

return (
<View style={[Link]}>
<Text style={[Link]}>
Push Notification
</Text>
<View style={[Link]} >
<Button
onPress={()=>{[Link]()}}
title="Show Notification"
style={[Link]}
color="#841584"
accessibilityLabel="Show Notification"
/>
</View>
</View>
);
}
}

[Link] 73
 const styles = [Link]({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
Button:{
margin: 10,
}
});

[Link]('PushNotification', () => App);

Navigation vers la scène à partir de la notification

Voici un exemple simple pour démontrer comment sauter / ouvrir un écran spécifique en fonction
de la notification. Par exemple, lorsqu'un utilisateur clique sur la notification, l'application doit
s'ouvrir et accéder directement à la page des notifications au lieu de la page d'accueil.

'use strict';

import React, { Component } from 'react';

import {
StyleSheet,
Text,
View,
Navigator,
TouchableOpacity,
AsyncStorage,
BackAndroid,
Platform,
} from 'react-native';
import PushNotification from 'react-native-push-notification';

let initialRoute = { id: 'loginview' }

export default class MainClass extends Component

{
constructor(props)
{
super(props);

[Link] = [Link](this);
}

handleNotification(notification)
{
[Link]('handleNotification');
var notificationId = ''
//your logic to get relevant information from the notification

//here you navigate to a scene in your app based on the notification info

[Link] 74
 [Link]({ id: Constants.ITEM_VIEW_ID, item: item });
}

componentDidMount()
{
var that = this;

[Link]({

// (optional) Called when Token is generated (iOS and Android)

onRegister: function(token) {
[Link]( 'TOKEN:', token );
},

// (required) Called when a remote or local notification is opened or received

onNotification(notification) {
[Link]('onNotification')
[Link]( notification );

[Link](notification);
},

// ANDROID ONLY: (optional) GCM Sender ID.

senderID: "Vizido",

// IOS ONLY (optional): default: all - Permissions to register.

permissions: {
alert: true,
badge: true,
sound: true
},

// Should the initial notification be popped automatically

// default: true
popInitialNotification: true,

/**
* (optional) default: true
* - Specified if permissions (ios) and token (android and ios) will requested or
not,
* - if not, you must call [Link]() later
*/
requestPermissions: true,
});
}

render()
{

return (
<Navigator
ref={(nav) => [Link] = nav }
initialRoute={initialRoute}
renderScene={[Link](this)}
configureScene={(route) =>
{
if ([Link])
{
return [Link];
}
return [Link];

[Link] 75
 }
}
/>
);
}

renderScene(route, navigator)
{

switch ([Link])
{
// do your routing here
case 'mainview':
return ( <MainView navigator={navigator} /> );

default:
return ( <MainView navigator={navigator} /> );
}
}
}

Lire Notification push en ligne: [Link]

[Link] 76
Chapitre 27: Polices Personnalisées
Examples
Étapes pour utiliser des polices personnalisées dans React Native (Android)

1. Collez votre fichier de polices à l'intérieur d' android/app/src/main/assets/fonts/font_name.ttf

2. Recompiler l'application Android en exécutant react-native run-android
3. Maintenant, vous pouvez utiliser fontFamily: 'font_name' dans vos styles natifs React

Étapes pour utiliser des polices personnalisées dans React Native (iOS)

1. Incluez la police dans votre projet Xcode.

2. Assurez-vous qu'ils sont inclus dans la colonne Adhésion cible

Cliquez sur la police du navigateur et vérifiez si la police est incluse.

3. Vérifiez si la police incluse en tant que ressource dans votre bundle

Cliquez sur votre fichier de projet Xcode, sélectionnez "Build Phases, sélectionnez" Copy Bundle
Resources ". Vérifiez si votre police est ajoutée.

[Link] 77
4. Inclure la police dans Application Plist ([Link])

Dans le dossier principal de l'application, ouvrez [Link], cliquez sur "Liste des propriétés
d'informations", puis sur le signe plus (+). dans la liste déroulante, choisissez "Polices fournies par
l'application".

5. Ajouter le nom de la police dans les polices fournies par l'application

Développez Polices fournies par l'application et ajoutez le nom exact de la police à la colonne
Valeur

6. Utilisez-le dans l'application

<Text style={{fontFamily:'IndieFlower'}}>
Welcome to React Native!
</Text>

Polices personnalisées pour Android et IOS

[Link] 78
 • Créez un dossier dans votre dossier de projet et ajoutez-y vos polices. Exemple:

○ Exemple: Ici, nous avons ajouté un dossier dans la racine appelé "mystuff", puis
"polices", et à l’intérieur nous avons placé nos polices:
○

• Ajoutez le code ci-dessous dans [Link] .

{
...

"rnpm": {
"assets": [
"path/to/fontfolder"
]
},

...
}

○ Pour l'exemple ci-dessus, notre [Link] aurait maintenant un chemin de "mystuff

/ fonts":

"rnpm": {
"assets": [
"mystuff/fonts"
]
}

• Exécutez la commande de react-native link .

• Utilisation de polices personnalisées sur le projet sous le code

<Text style={{ fontFamily: 'FONT-NAME' }}>

My Text
</Text>

Où FONT-NAME est la plate-forme de préfixe spécifique.

Android

FONT-NAME est le mot avant l'extension dans le fichier. Exemple: Le nom de fichier de

[Link] 79
 votre police est [Link] , vous devez donc définir fontFamily: Roboto-Regular .

iOS

FONT-NAME est "Full Name" trouvé après un clic droit sur le fichier de police, puis en
cliquant sur "Get Info". (Source: [Link] ), dans la
capture d'écran ci-dessous, le nom du fichier est MM Proxima Nova Ultra [Link] , cependant
"Nom complet" est "Proxima Nova Semibold", vous devriez donc fontFamily: Proxima Nova
Semibold . Capture d'écran -

• Exécutez react-native run-ios ou react-native run-android (ceci sera recompilé avec les
ressources)

Lire Polices Personnalisées en ligne: [Link]

personnalisees

[Link] 80
Chapitre 28: RefreshControl avec ListView
Remarques
Les références:

RefreshControl: [Link]

ListView: [Link]

Examples
Contrôle de rafraîchissement

_refreshControl(){
return (
<RefreshControl
refreshing={[Link]}
onRefresh={()=>this._refreshListView()} />
)
}

rafraîchissant: c'est l'état du spinner (true, false).

onRefresh: cette fonction invoquera lors de l'actualisation de ListView / ScrollView.

Fonction onRefresh Exemple

_refreshListView(){
//Start Rendering Spinner
[Link]({refreshing:true})
[Link](
{name:'Fusion',color:'Black'},
{name:'Yaris',color:'Blue'}
)
//Updating the dataSource with new data
[Link]({ dataSource:
[Link]([Link]) })
[Link]({refreshing:false}) //Stop Rendering Spinner
}

Ici, nous mettons à jour le tableau et ensuite nous mettrons à jour le dataSource. nous pouvons
utiliser fetch pour demander quelque chose du serveur et utiliser async / waiting.

Refresh Control with ListView Exemple complet

RefreshControl est utilisé dans un composant ScrollView ou ListView pour ajouter une
fonctionnalité d'actualisation. dans cet exemple, nous allons l'utiliser avec ListView

[Link] 81
 'use strict'
import React, { Component } from 'react';
import { StyleSheet, View, ListView, RefreshControl, Text } from 'react-native'

class RefreshControlExample extends Component {

constructor () {
super()
[Link] = {
refreshing: false,
dataSource: new [Link]({
rowHasChanged: (row1, row2) => row1 !== row2 }),
cars : [
{name:'Datsun',color:'White'},
{name:'Camry',color:'Green'}
]
}
}

componentWillMount(){
[Link]({ dataSource:
[Link]([Link]) })
}

render() {
return (
<View style={{flex:1}}>
<ListView
refreshControl={this._refreshControl()}
dataSource={[Link]}
renderRow={(car) => this._renderListView(car)}>
</ListView>
</View>
)
}

_renderListView(car){
return(
<View style={[Link]}>
<Text>{[Link]}</Text>
<Text>{[Link]}</Text>
</View>
)
}

_refreshControl(){
return (
<RefreshControl
refreshing={[Link]}
onRefresh={()=>this._refreshListView()} />
)
}

_refreshListView(){
//Start Rendering Spinner
[Link]({refreshing:true})
[Link](
{name:'Fusion',color:'Black'},
{name:'Yaris',color:'Blue'}
)
//Updating the dataSource with new data

[Link] 82
 [Link]({ dataSource:
[Link]([Link]) })
[Link]({refreshing:false}) //Stop Rendering Spinner
}

const styles = [Link]({

listView: {
flex: 1,
backgroundColor:'#fff',
marginTop:10,
marginRight:10,
marginLeft:10,
padding:10,
borderWidth:.5,
borderColor:'#dddddd',
height:70
}

})

[Link] = RefreshControlExample

Lire RefreshControl avec ListView en ligne: [Link]

native/topic/6672/refreshcontrol-avec-listview

[Link] 83
Chapitre 29: Rendu de plusieurs accessoires
Examples
rendre plusieurs variables

Pour rendre plusieurs accessoires ou variables, nous pouvons utiliser `` .

render() {
let firstName = 'test';
let lastName = 'name';
return (
<View style={[Link]}>
<Text>{`${firstName} ${lastName}` } </Text>
</View>
);
}

Sortie: nom du test

Lire Rendu de plusieurs accessoires en ligne: [Link]

native/topic/10781/rendu-de-plusieurs-accessoires

[Link] 84
Chapitre 30: Requêtes HTTP
Syntaxe
• fetch (url, options) [. alors (...) [. catch (...)]]

Remarques
• L'API Fetch est l'API la plus utilisée pour les requêtes HTTP. Il est moderne, flexible et utilise
des promesses.
• L'API XMLHttpRequest est également utilisée pour les requêtes HTTP et est principalement
incluse afin que les développeurs puissent utiliser leurs bibliothèques existantes préférées,
comme ApiSauce .
• L'API Websocket peut être utilisée pour des données "en direct" dans des scénarios en
temps réel, par exemple dans des applications de discussion.

Examples
WebSockets

var ws = new WebSocket('[Link]

[Link] = () => {
// connection opened

[Link]('something'); // send a message

};

[Link] = (e) => {

// a message was received
[Link]([Link]);
};

[Link] = (e) => {

// an error occurred
[Link]([Link]);
};

[Link] = (e) => {

// connection closed
[Link]([Link], [Link]);
};

HTTP avec l'API de récupération

Il convient de noter que Fetch ne prend pas en charge les rappels de progression . Voir:
[Link] .

L'alternative est d'utiliser XMLHttpRequest [Link]

[Link] 85
US/docs/Web/Events/progress .

fetch('[Link] => [Link](json));

fetch('/login', {
method: 'POST',
body: form,
mode: 'cors',
cache: 'default',
}).then(session => onLogin(session), failure => [Link](failure));

Plus de détails sur la récupération peuvent être trouvés à MDN

Mise en réseau avec XMLHttpRequest

var request = new XMLHttpRequest();

[Link] = (e) => {
if ([Link] !== 4) {
return;
}

if ([Link] === 200) {

[Link]('success', [Link]);
} else {
[Link]('error');
}
};

[Link]('GET', '[Link]
[Link]();

Utiliser des promesses avec l'API d'extraction et Redux

Redux est la bibliothèque de gestion d'états la plus utilisée avec React-Native. L'exemple suivant
montre comment utiliser l'API d'extraction et envoyer des modifications à votre réducteur d'état
d'applications en utilisant redux-thunk.

export const fetchRecipes = (action) => {

return (dispatch, getState) => {
fetch('/recipes', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: [Link]({
recipeName,
instructions,
ingredients
})
})
.then((res) => {
// If response was successful parse the json and dispatch an update
if ([Link]) {
[Link]().then((recipe) => {
dispatch({

[Link] 86
 type: 'UPDATE_RECIPE',
recipe
});
});
} else {
// response wasn't successful so dispatch an error
[Link]().then((err) => {
dispatch({
type: 'ERROR_RECIPE',
message: [Link],
status: [Link]
});
});
}
})
.catch((err) => {
// Runs if there is a general JavaScript error.
dispatch(error('There was a problem with the request.'));
});
};
};

Socket Web avec [Link]

Installer [Link]-client

npm i [Link]-client --save

Module d'importation

import SocketIOClient from '[Link]-client/dist/[Link]'

Initialiser dans votre constructeur

constructor(props){
super(props);
[Link] = SocketIOClient('[Link]
}

Maintenant, pour utiliser correctement votre connexion socket, vous devez également lier vos
fonctions dans constructeur. Supposons que nous devions créer une application simple, qui
enverra un ping à un serveur via un socket toutes les 5 secondes (considérez ceci comme un
ping), puis l'application recevra une réponse du serveur. Pour ce faire, créons d'abord ces deux
fonctions:

_sendPing(){
//emit a dong message to socket server
[Link]('ding');
}

_getReply(data){
//get reply from socket server, log it to console
[Link]('Reply from server:' + data);
}

[Link] 87
Maintenant, nous devons lier ces deux fonctions dans notre constructeur:

constructor(props){
super(props);
[Link] = SocketIOClient('[Link]

//bind the functions

this._sendPing = this._sendPing.bind(this);
this._getReply = this._getReply.bind(this);
}

Après cela, nous devons également lier la fonction _getReply avec le socket afin de recevoir le
message du serveur de socket. Pour ce faire, nous devons attacher notre fonction _getReply avec
un objet socket. Ajoutez la ligne suivante à notre constructeur:

[Link]('dong', this._getReply);

Maintenant, chaque fois que le serveur de socket émet avec le «dong», votre application pourra le
recevoir.

Http avec axios

Configurer

Pour les demandes Web, vous pouvez également utiliser la bibliothèque axios .

C'est facile à configurer. Pour cela, vous pouvez créer le fichier [Link] par exemple:

import * as axios from 'axios';

var instance = [Link]();

[Link] = serverURL;
[Link] = 20000;]
//...
//and other options

export { instance as default };

et ensuite l'utiliser dans n'importe quel fichier que vous voulez.

Demandes

Pour éviter d'utiliser le pattern 'Swiss knife' pour chaque service de votre backend, vous pouvez
créer un fichier séparé avec des méthodes pour cela dans le dossier pour la fonctionnalité
d'intégration:

import axios from '../axios';

import {
errorHandling
} from '../common';

const UserService = {

[Link] 88
 getCallToAction() {
return [Link]('api/user/dosomething').then(response => [Link])
.catch(errorHandling);
},
}
export default UserService;

Essai

Il existe une lib pour tester les axios: axios-mock-adapter .

Avec cette lib, vous pouvez définir sur axios toute réponse que vous souhaitez pour le tester.
Vous pouvez également configurer des erreurs spéciales pour vos méthodes axois. Vous pouvez
l'ajouter à votre fichier [Link] créé à l'étape précédente:

import MockAdapter from 'axios-mock-adapter';

var mock = new MockAdapter(instance);

[Link]().reply(500);

par exemple.

Redux Store

Parfois, vous devez ajouter des en-têtes à autoriser, que vous stockez probablement dans votre
magasin Redux.

Dans ce cas, vous aurez besoin d'un autre fichier, [Link] avec cette fonction:

export function getAuthToken(storeContainer) {

return config => {
let store = [Link]();
[Link]['Authorization'] = [Link];
return config;
};
}

Suivant dans le constructeur de votre composant racine, vous pouvez ajouter ceci:

[Link](getAuthToken([Link]));

et ensuite toutes vos demandes seront suivies avec votre jeton d'autorisation.

Comme vous pouvez le voir, axios est une bibliothèque très simple, configurable et utile pour les
applications basées sur react-native.

Lire Requêtes HTTP en ligne: [Link]

[Link] 89
Chapitre 31: Test d'unité
Introduction
Le test unitaire est une pratique de test de bas niveau où les plus petites unités ou composants du
code sont testés.

Examples
Test unitaire avec blague

Jestest un framework de test javascript largement utilisé pour tester les applications de réaction.
C'est soutenu par facebook

Voici un test

import 'react-native';
import React from 'react';
import Index from '../[Link]';

import renderer from 'react-test-renderer';

it('renders correctly', () => {

const tree = [Link](
<Index />
);
});

Voici un code pour le faire passer

import React, { Component } from 'react';

import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';

export default class gol extends Component {

render() {
return (
<View>
<Text>
Welcome to React Native!
</Text>
<Text>
To get started, edit [Link]
</Text>
<Text>
Double tap R on your keyboard to reload,{'\n'}
Shake or press menu button for dev menu
</Text>

[Link] 90
 </View>
);
}
}

[Link]('gol', () => gol);

Test unitaire dans React Native utilisant Jest

A partir de la version 0.38 de rea-native, une configuration Jest est incluse par défaut lors de
l'exécution de init-native. La configuration suivante doit être automatiquement ajoutée à votre
fichier [Link]:

"scripts": {
"start": "node node_modules/react-native/local-cli/[Link] start",
"test": "jest"
},
"jest": {
"preset": "react-native"
}

Vous pouvez exécuter run npm test or jest pour tester un fichier natif. Pour l'exemple de code:
Link

Lire Test d'unité en ligne: [Link]

[Link] 91
Chapitre 32: WebView
Introduction
Webview peut être utilisé pour charger des pages Web externes ou du contenu HTML. Ce
composant est là par défaut.

Examples
Composant simple utilisant webview

import React, { Component } from 'react';

import { WebView } from 'react-native';

class MyWeb extends Component {

render() {
return (
<WebView
source={{uri: '[Link]
style={{marginTop: 20}}
/>
);
}
}

Lire WebView en ligne: [Link]

[Link] 92
Crédits
S.
Chapitres Contributeurs
No

Adam, Community, Damien Varron, Dmitry Petukhov, Dr.

Démarrer avec rea-
1 Nitpick, Idan, Kaleb Portillo, Lucas Oliveira, manosim,
native
Scimonster, Sivart, Tushar Khatiwada, xhg, Yevhen Dubinin

Android - Bouton Cássio Santos, manosim, Michael S, Pascal Le Merrer,

2
Retour de matériel Sriraman, Virat18

3 API d'animation Shashank Udupa, Sriraman, Tom Walters

4 Bonjour le monde stereodenis, Zakaria Ridouh

5 Coiffant Jigar Shah, Martin Cup, Scimonster

6 Composants Michael Hancock, Sriraman, Tobias Lins

Créer un partageable
7 Aditya Singh
APK pour Android

Alex Belets, gwint, Jagadish Upadhyay, Scimonster, sudo

8 Disposition
bangbang

ESLint in react-
9 Alex Belets
native

10 Etat AndyI, David, Jagadish Upadhyay, Tim Rijavec, Tobias Lins

Exécuter une
application sur
11 Jagadish Upadhyay, Lwin Kyaw Myat, Mayeul
l'appareil (version
Android)

Jagadish Upadhyay, Jigar Shah, Serdar Değirmenci, Zakaria

12 Images
Ridouh

Instructions en ligne Dmitry Petukhov, epsilondelta, Idan, Jagadish Upadhyay,

13
de commande manosim, Mozak, Sriraman, Tim Rijavec

Intégration avec
14 Firebase pour Ankit Sinha, corasan
l'authentification

15 Le débogage Jagadish Upadhyay, mostafiz rahman

[Link] 93
 16 Le routage sudo bangbang

CallMeNorm, Chris Pena, corasan, fson, Gianfranco P.,

17 Les accessoires henkimon, Hugo Dozois, Idan, Jagadish Upadhyay, Tobias Lins,
Yevhen Dubinin, zhenjie ruan

Liaison de l'API
18 Viktor Seč
native

19 ListView Kaleb Portillo

Meilleures pratiques
20 Alex Belets
de rendu

Meilleures pratiques
21 Ankit Sinha, Michael Helvey, Pankaj Thakur
du navigateur

22 Modal Ahmed Ali, Liron Yahdav, Tobias Lins

Module de plate- Florian Hämmerle, Gabriel Diez, Jagadish Upadhyay, Zakaria

23
forme Ridouh

24 Modules natifs Andres C. Viesca

Navigateur avec
25 boutons injectés Ahmed Al Haddad
depuis les pages

26 Notification push shaN, Tejashwi Kalp Taru

Polices Abdulaziz Alkharashi, Lwin Kyaw Myat, Noitidart, Olivia,

27
Personnalisées Sriraman

RefreshControl avec
28 Abdulaziz Alkharashi
ListView

Rendu de plusieurs
29 Jigar Shah
accessoires

Alex Belets, Alireza Valizade, AntonB, Chris Pena, Daniel

Schmidt, Dmitry Petukhov, Everettss, Jagadish Upadhyay,
30 Requêtes HTTP
manosim, MauroPorrasP, respectTheCode, shaN, Tejashwi
Kalp Taru, Tobias Lins

31 Test d'unité Ankit Sinha, sudo bangbang

32 WebView sudo bangbang

[Link] 94