react native

Créer un application React Native

React Native s’appuie sur ReactJs pour proposer ue expérience de développement d’application mobile cross platform, en théorie vous développez pour Android et IOS en écrivant un seul code, c’est le déploiement par plateforme qui vous garantit cette promesse de coder une fois, pour plusieurs plateformes. React Native n’est pas seul sur ce créneau, il y a Ionic (qui s’appuie sur Cordova lui-même issue de Phonegap), Xamarin (s’appuyant sur la plateforme .NET), Flutter le dernier venu qui s’appuie sur Dart.

La popularité de React Native vien de la popularité de ReactJs, je vous conseille de lire au moins un tutoriel de ReactJs pour comprendre la philosophie de React Native, bien que ce ne soit pas strictement nécessaire.

La difficulté d’étudier React Native vient souvent de breaking change et de l’évolution rapide de la technologie qui fait que c’est un peu difficile pour les débutants qui n’ont pas suivi au jour le jour l’évolution de cette technologie.

Deux façons de développer en React Native

A l’origine, il fallait faire appel au seul react-native-cli pour bootstrapper une application, mais est venu s’ajouter une façon plus intuitive ou graphique (non abordée ici) nommée Expo. Pour commencer je recommande de commencer par la façon basique avec react-native-cli.

Notre première tâche est d’installer l’outil en ligne de commande react-native-cli.

$ npm install -g react-native-cli
# créer un projet avec le CLI react-native
$ react-native init monProjet

Les composants de React Native

AsyncStorage pour stocker les informations

Attention : si vous tentez de stocker une chaine vide, elle aura la valeur null dans le storage, par ce fait la prochaine fois que vous lirez une clé, elle vous retournera une valeur null.

Glossaire :

xpo-cli

react-native-cli

cocoapod

Application smartphone Expo

Démarrer Metro

$ react-native start

Rendu conditionel

#les parenthèses sont importantes          
{  (lieuJeu != '') &&
            <View>
              <Text style={style.labelStyle}>Lieu du jeu</Text>
              <View style={cart.encart}>
                <Text style={cart.textLarge}>{lieuJeu}</Text>
              </View>
            </View>

          }

#autre cas
                    { (isLoading, data.listContent) && <View style={{marginVertical:15}}>{ this.renderAccordians(data) }</View> }


#deuxième façon de faire avec opérateur ternaire
                    { isLoading ? <ActivityIndicator /> : <HTML html={data.content} tagsStyles={{...tagsStyles}}  imagesMaxWidth={Dimensions.get('window').width} /> }

Afficher un warning avec Console.warn (pratique pour toujours avoir la sortie sur l’émulateur)

console.warn(data)

Renommer une application (nom en dessous de l’icône)

Pour Android :

Aller à android/app/src/main/res/values/ et éditez le fichier strings.xml

Pour IOS :

Aller à ios/nomappli/info.plist

Retour en haut