Fermer

janvier 22, 2019

Développer une application Android avec React Native & Publish sur Google Play –


Cet article a été publié à l'origine sur sur le blog des développeurs d'Okta . Merci de soutenir les partenaires qui rendent SitePoint possible.

Alors que l'utilisation des applications mobiles devrait continuer à croître, le moment est propice pour entrer sur le marché. Android est de loin le système d’exploitation le plus populaire au monde et le moyen le plus répandu d’offrir des applications Android aux utilisateurs de téléphones est le Google Play Store. Dans ce didacticiel, vous allez créer une application React Native et vous expliquer tout le processus de sélection d'un design, ainsi que la configuration de votre environnement React Native, des conseils pour tirer le meilleur parti de votre éditeur et sa publication. sur Google Play.

Voici à quoi ressemblera l’application éventuelle:

 Résultat final

Pour ce tutoriel, j’ai consulté la Mega Project List de Karan Goel pour inspiration du projet. Vous construirez le problème de la Prime Factorization qui prend un nombre et renvoie ses facteurs premiers.

Déterminez l'interface de Theming pour votre application native React

En dehors de la logique d'application, l'interface utilisateur et les décisions de thème sont variées Le plus important que vous ferez pour votre application. Cela inclut les commandes telles que les menus déroulants et les boutons, ainsi que la disposition à l’écran. Puisque nous utilisons une technologie basée sur React, nous allons utiliser Styled Components une approche populaire et légère pour les applications Reaing (et elle aussi convient parfaitement à React Native ). Une page entière énumère les composants et les systèmes de composants basés sur des composants stylés. Dans ce didacticiel, vous allez utiliser des composants stylés pour créer vous-même des composants.

Configurez votre environnement de production Android

Pour créer le fichier APK éventuel (le format de l'application que vous allez télécharger dans le magasin). , vous devez installer Android Studio . Cela fait, assurez-vous que vous avez bien la version 27 du SDK, car c'est ce que React Native utilise.

Installez le JDK

. Vous devez également vous assurer qu'un kit de développement Java récent est installé (comme la version 8). L'installation diffère selon votre plate-forme. Vous pouvez utiliser le SDK Java d’Oracle ou de SDKMAN pour installer d’autres options, telles que OpenJDK.

Ajoutez le CLI Native React et initialisez le squelette

Ensuite, vous devez installer le logiciel Interface de ligne de commande native React. Pour cela, vous devez vous assurer que vous avez nœud installé qui varie en fonction de votre système d'exploitation. (J'utilise version 8.12.0 ).

 npm install -g react-native-cli@2.0.1

Vous devriez avoir à votre disposition une commande réagissant-native qui inclut l'option init .

 réagissant-native init prime_components

Ceci créera le répertoire prime_components et mettra un projet React Native à l'intérieur, avec un squelette exécutable. Accédez au répertoire connectez votre téléphone Android ou à un émulateur (après avoir installé Android Studio ) et exécutez le projet.

REMARQUE: Si Android Studio vous invite à ouvrir un projet avant de pouvoir créer un émulateur, vous pouvez pointer vers le répertoire prime_components / android .

 cd prime_components
réagit natif run-android

 Bienvenue dans React Native

Pour voir la sortie que vous allez télécharger sur le Play Store, allez à android / app / build / output / apk / debug . Vous devriez voir un app-debug.apk d'une taille d'environ 8 Mo

Réduire la taille de sortie de votre application Android

Vous voulez vous assurer que les utilisateurs auront le téléchargement le plus petit possible. C’est déjà assez petit (environ 8 Mo) parce que vous utilisez la ligne de commande (quelque chose comme Expo fait 25 Mo pour les applications même les plus élémentaires) mais nous pouvons le réduire davantage . Allez à android / app / build.gradle et modifiez les variables suivantes en true :

 def enableSeparateBuildPerCPUArchitecture = true
def enableProguardInReleaseBuilds = true

Vous devez également supprimer la section ndk de defaultConfig pour supprimer la configuration en conflit dans le ndk abiFilters :

 ndk {
    abiFilters "armeabi-v7a", "x86"
}

Maintenant, après avoir ré-exécuté réagissez nativement sous androïde vous devriez voir deux APK (beaucoup plus petits – entre 4 et 5 Mo) dans le répertoire de sortie.

Ajoutez des peluches à votre application native React [19659011] L'écriture de JavaScript (comme React) nécessite des outils vous permettant de vous assurer que vous n'avez pas commis d'erreurs évidentes pouvant être d'une grande aide pour les débutants. Le plus courant d'entre eux est ESLint et peut être branché directement dans votre projet et votre éditeur.

Ajoutez d'abord le linter utilisant NPM:

 npm install -D eslint@5.9.0 babel-eslint @ 10.0.1

Un ensemble courant de plugins est la configuration d'Airbnb donc ajoutez-les également:

 npm install -D eslint-config-airbnb@17.1.0 eslint-plugin-jsx-a11y@6.1.2 eslint -plugin-react@7.11.1 eslint-plugin-import@2.14.0

Insérez maintenant le texte suivant dans .eslintrc.js (vous devrez créer ce fichier):

 module.exports = {
  'extend': 'airbnb',
  'analyseur': 'babel-eslint',
  'env': {
    'plaisanterie: vrai,
  },
  'règles': {
    'no-use-before-define': 'off',
    'react / jsx-filename-extension': 'off',
    'react / prop-types': 'off',
    'virgule': 'off'
  },
  'globals': {
    "chercher": faux
  }
}

Il ne vous reste plus qu'à ajouter les plugins dans votre éditeur. Pour Sublime, il existe ESLint qui vous donne une sortie d’erreurs (ou problèmes) avec CTRL + ALT + e ( Cmd + Option + e sur Mac). Là aussi un pour VSCode .

 ESLint

Beaucoup de ces erreurs peuvent être corrigées automatiquement à l’aide de la commande eslint --fix . Exécuter à partir de votre éditeur avec le package ESLint Fix

Ajouter des composants stylisés pour React Native

React and React Native construit des interfaces utilisant des technologies Web, telles que HTML, CSS et JavaScript. Une bibliothèque très populaire à utiliser avec React (et React Native) est Styled Components qui explique comment ajouter du CSS à vos composants.

Par exemple, jetez un coup d'œil au code suivant, extrait du Exemple d'application d'application native (qui correspond à ce que vous obtenez avec react-init ):

 La classe d'exportation par défaut App étend le composant  {
  render () {
    revenir (
      
       Bienvenue dans React Native! 
       Pour commencer, modifiez App.js 
       {instructions} 
    
  );
  }
}

const styles = StyleSheet.create ({
  récipient: {
    flex: 1,
    justifierContent: 'center',
    alignItems: 'center',
    backgroundColor: '# F5FCFF',
  },
  Bienvenue: {
    fontSize: 20,
    textAlign: 'center',
    marge: 10,
  },
  instructions: {
    textAlign: 'center',
    couleur: '# 333333',
    marginBottom: 5,
  },
});

Vous déclarez vos éléments DOM ( View Text ), en les liant à des styles, puis créez la feuille de style plus tard.

Avec Styled Components, procédez comme suit:

 const Container = styled.View`
  flex: 1;
  justifier-contenu: centre;
  align-items: centre;
  couleur de fond: # F5FCFF;
`;

const Welcome = styled.Text`
  fontSize: 20;
  text-align: center;
  marge: 10;
`;

const Instructions = styled.Text`
  text-align: center;
  couleur: # 333333;
  marge inférieure: 5;
`;

export default class App étend le composant  {
  render () {
    revenir (
      
         Bienvenue dans React Native! 
         Pour commencer, éditez App.js 
      
  );
  }
}

Il est à la fois plus propre et plus portable (les noms de CSS ne sont pas en conflit, etc.).

Pour l'installer, exécutez npm install styled-components@4.1.1 à partir du répertoire racine. 19659055] Ajoutez des polices personnalisées à votre application native React

Pour obtenir une police personnalisée telle que Racing Sans One vous devez d'abord télécharger le fichier ttf et l'insérer dans de ressources / polices . ] (vous devrez créer ce répertoire). Ajoutez ensuite ce qui suit à votre package.json :

 "rnpm": {
  "avoirs": [
    "./assets/fonts/"
  ]
}

Enfin, exécutez le lien natif à partir de la ligne de commande. Vous devriez maintenant voir votre police dans android / app / src / main / assets / fonts . Vous devriez pouvoir l'utiliser maintenant. Créez un dossier components et mettez les éléments suivants dans components / Header.js :

 import portant le style 'styled-components / native';

exporter par défaut styled.Text`
  la couleur noire;
  font-family: RacingSansOne-Regular;
  taille de police: 32px;
  marge supérieure: 120 pixels;
  couleur de fond: transparent;
  text-align: center;
`;

Importez-le ensuite dans votre App.js et ajoutez Welcome au-dessus des noeuds Text :

 import Header de './components/Header ';
...
export default class App étend le composant  {
  render () {
    revenir (
      
        
Bienvenue
Bienvenue dans React Native! Pour commencer, modifiez App.js {instructions}
);   } }

Et vous devriez obtenir un en-tête bien formaté:

 Polices personnalisées

Ajustez votre application pour qu'elle soit en plein écran sur Android

Pour que votre application ne montre pas la barre de titre, accédez à android / app / src / main / res / values ​​/ styled.xml et ajoutez ce qui suit dans l'élément :

 true 

Lorsque vous relancez l'exécution, vous devriez voir que la barre de navigation a disparu.

Création des composants de l'application Android

Le choix du design final, avec la mise en page, les couleurs et les polices peut prendre un certain temps. C'est souvent un processus itératif. Vous allez voir ici comment construire le résultat final que vous avez vu au début – inspiré des tutoriels en ligne sur les exemples et relatifs au style – mais n'oubliez pas qu'il faut du temps pour obtenir

Changez App.js comme suit:

 import Réagissez à partir de 'react';
import {Container, Header, Input, Keypad, ButtonRow} depuis './components';

const App = () => (
  
    
Prime Components
123456
); exportation par défaut App;

Vous pouvez voir ici à quel point les composants stylés sont propres. Nous avons un en-tête, une entrée et un clavier (tous les noms que vous choisissez), le tout entouré d’un conteneur. Aucune information superflue. Le style se produit dans les composants.

Créez le répertoire components . Dans components / index.js inscrivez ce qui suit:

 export {default as Input} from './Input';
export {default as Container} à partir de './Container';
export {default as Header} à partir de './Header';
exporter {par défaut comme clavier} de './Keypad';
exporter {default as Button} à partir de './Button';
exporter {default as ButtonRow} à partir de './ButtonRow';

Ceci est juste un module pratique qui permet l’importation comme dans App.js c’est-à-dire `import {Container, Header, Input, Keypad, ButtonRow} à partir de‘ ./components ’;`. Sinon, vous devez importer chaque composant sur une ligne distincte.

Mettez ceci dans de composants / Container.js : (Remarque: vous devez utiliser des lettres majuscules dans React Native!) [19659035] import style à partir de 'styled-components / native';

exporter par défaut Container = styled.View`
  flex: 1;
`;

Très simple: vous agrandissez un composant View et vous lui affectez une valeur de flex (ce qui dans ce contexte signifie “tout prendre”).

components / Header.js :

 import style à partir de 'styled-components / native';

export par défaut Header = styled.Text`
  flex: 1,5;
  taille de la police: 80px;
  famille de polices: Chathura-ExtraBold;
  couleur de fond: RGB (29, 31, 33);
  couleur: or;
  text-align: center;
`;

Également, un composant de texte stylé, avec de grandes polices centrées, une couleur or et un fond gris. Assurez-vous que vous installez la police Chathura de Google Polices comme auparavant!

components / Input.js :

 importé à partir de 'styled-components / native' ;

export par défaut Input = styled.Text`
  flex: 2;
  text-align: right;
  famille de polices: Audiowide-Regular;
  text-align-vertical: center;
  taille de police: 70;
  couleur: brique réfractaire;
  couleur de fond: or;
`;

Identique à auparavant sauf maintenant avec la police Audiowide-Regular (également disponible auprès de Google Fonts ).

components / Keypad.js :

 import styled from ' styled-components / native ';

exportation clavier par défaut = styled.View`
  flex: 6;
  couleur de fond: RGB (29, 31, 33);
  rembourrage en haut: 10px;
  rembourrage en bas: 10px;
`;

Également juste une vue stylée (essentiellement un conteneur semblable à un

en HTML).

components / ButtonRow.js :

 import Réagissez à partir de 'react';
importer des styles à partir de 'styled-components / native';
importer {Button} de '.';

const RowBox = styled.View`
  flex: 1;
  direction de flexion: rangée;
`;

Exporter par défaut ButtonRow = ({keys}) => (
  
    {/ * https://stackoverflow.com/a/32157488 * /}
    {keys.map (key => (
      

Ici, les choses se compliquent. Vous importez un bouton à partir du répertoire en cours (que vous créerez en une seconde), pour créer un composant appelé RowBox qui n'est pas exporté, puis ButtonRow est défini comme ayant une propriété de réaction appelée clés .

Vous mappez ensuite chaque clé sur un composant de bouton. C’est une façon propre de parcourir en boucle un tableau comme avec pour chaque et d’utiliser la valeur pour définir les attributs de texte et (vous devez définir une clé attribut pour rendre l’objet DOM unique!). Vous allez utiliser le texte pour rendre le bouton.

composants / Button.js :

 import Réagissez à partir de 'react';
importer des styles à partir de 'styled-components / native';

/ * https://kylewbanks.com/blog/react-native-tutorial-part-2-designing-a-calculator * /

/ * https://github.com/styled-components/styled-components/issues/149 * /
const ButtonBox = styled.TouchableHighlight.attrs ({
  underlayColor: '# 193441',
}) `
  flex: 1;
  align-items: centre;
  justifier-contenu: centre;
  couleur de fond: RGB (39, 41, 43);
  border-radius: 10px;
  marge: 5px;
`;

const ButtonText = styled.Text`
  taille de police: 30;
  famille de polices: Orbitron-Bold;
  couleur: $ {props => props.text == "Go"? "vert": "orange"};
`;

handleButtonPress = (valeur) => {

};

bouton d'exportation par défaut = ({text}) => (
   handleButtonPress ()}>
     {text} 
  
);

Ceci est le dernier composant. Vous commencez par créer un ButtonBox qui agit simplement comme un conteneur sur tout le bouton. Il utilise TouchableHighlight un composant React Native qui change de couleur lorsqu'il est touché. Le style est normal à l'exception de la couleur de la sous-couche (la couleur que vous voyez lorsque vous touchez) car elle doit être modifiée pour fonctionner dans Styled Components .

Ensuite, vous avez ButtonText . est un contrôle de texte. Installez Orbitron-Bold dans Google Fonts pour cela. La couleur est définie à l'aide d'un contrôle booléen (autre fonctionnalité intéressante de Styled Components, prise en charge complète de CSS). La couleur sera essentiellement verte si le texte est "Go" et orange sinon.

Ensuite, définissez une fonction pour gérer les appuis sur les boutons (vide pour le moment), puis exportez le composant Button qui combine les deux. Définissez l'attribut text sur ButtonText à l'aide de la propriété définie sur le bouton afin que les composants stylisés puissent le voir lorsque vous définissez les styles.

Une fois terminé, vous L’application Android devrait être identique à celle affichée au début de cet article

Ajouter des couleurs à votre application Android

Il est possible que les couleurs de l’émulateur Android ne correspondent pas toujours lorsque vous les visualisez sur un téléphone réel. C'est parce que Android Oreo a corrigé la gestion des couleurs afin de s'assurer que les choses avaient la même apparence sur tous les appareils. Si vous rencontrez des problèmes similaires, voyez si vous utilisez Android 7 ou une version antérieure.

Vous pouvez limiter vos utilisateurs à Android 8 ou une version ultérieure, mais pour le moment cela ne représente que environ 20% des utilisateurs d'Android . Il est probablement préférable de mettre un message quelque part pour dire que les choses se présentent un peu mieux sur les versions ultérieures. Maintenant, vous devez connecter les boutons pour qu’ils fassent quelque chose. Pour commencer, vous devez faire en appuyant sur les chiffres (et la touche Effacer) ajouter et supprimer des numéros de l'affichage des chiffres.

Pour cela, vous devez comprendre l'état dans React.

Lifting Up State

Nous avons besoin d'un source unique de vérité pour le numéro actuel (à afficher) et la fonction de rappel qui le modifiera. Il doit être un parent des deux (le Input et le Button ). Puisque cela fait partie de l'application, vous pouvez l'insérer dans le composant App de App.js .

Commencez par modifier App.js et convertissez-le. dans une classe React (de la définition fonctionnelle actuelle) depuis vous en avez besoin pour capturer l'état .

 import Réagissez à partir de 'react';
import {Container, Header, Input, Keypad, ButtonRow} depuis './components';

La classe App étend React.Component {
  render () {
    revenir (
      
        
Prime Components
123456
);   } } exportation par défaut App;

App est maintenant une classe JavaScript ES6 et elle dispose d'une méthode render () qui renvoie le JSX.

Recharger l'émulateur / app. (dans l'émulateur, vous pouvez utiliser R + R) et il devrait toujours restituer comme avant.

Maintenant, ajoutez ce qui suit ci-dessus votre méthode render () :

 constructor (props) {
  super (accessoires);
  this.state = {numéro: 123456};
}

Vous substituez le constructeur React appelez le parent (ce que vous devez toujours), puis définissez l'état sur un objet JSON avec un membre: numéro (que nous avons initialisé à notre valeur ancienne: 123456).

Ajoutez maintenant ceci au-dessus de la déclaration (...) dans App.js :

 const {state} = this;

Cette détruit l'état de cette en une variable locale. Remplacez la ligne par {state.number} . Maintenant, l'entrée est rendue à partir de l'état. Rechargez et vous devriez voir la même sortie (et changer le constructeur d'état pour le voir changer).

Modification d'état dans React

Vous devez maintenant indiquer à chaque bouton d'appeler une fonction définie dans votre classe App. Ajoutez ce qui suit au constructeur:

 this.press = this.press.bind (this);

La fonction press aura accès à ce (nécessaire lorsque vous appelez this.setState ).

Ensuite, définissez un Appuyez sur la fonction qui ne fait qu'indiquer quel bouton a été enfoncé.

 Appuyez sur = (valeur) => {
  alerte (valeur);
};

Passez maintenant cette fonction aux rangées de boutons:

 



Modifiez ButtonRow pour prendre cette valeur et la transmettre au créé Button s.

 Exporter par défaut ButtonRow = ({func, keys}) => (
  
    {keys.map (key => (
      

Enfin, changez le bouton pour activer cette fonction et appelez-le avec le bouton enfoncé. Vous pouvez également supprimer le gestionnaire de boutons précédent.

 export default Button = ({func, text}) => (
   func (text)}>
     {text} 
  
);

Maintenant, lorsque vous appuyez sur un bouton, une alerte indiquant ce que vous avez appuyé apparaît:

 Boutons

Vous avez maintenant une seule fonction, définie dans le en haut

Utilisation correcte des propriétés de classe dans React

Pour nettoyer un peu les choses, vous pouvez utiliser les propriétés de classe pour initialiser l’état dans React. Retirez simplement le constructeur et remplacez-le par ceci:

 state = {
  nombre: 123456
};

Mettez à jour l'affichage de votre application native React

Lorsque vous appuyez sur les touches numériques, vous devez ajouter ce numéro au numéro actuel. De plus, lorsque vous appuyez sur Clear vous devez supprimer. Faites cela en premier. Remplacez appuyez sur () par ce qui suit:

 appuyez sur = (valeur) => {
  let {nombre} = this.state;
  if (valeur === 'Effacer') {
    nombre = Math.floor (nombre / 10);
    this.setState ({numéro});
  }
}

Tout d’abord, cela extrait la valeur du nombre de l’état qui utilise la déstructuration (en utilisant votre linter précédemment, vous verrez que c’est préférable). Ensuite, si la clé est Clear divisez le nombre par dix, limitez-le au sol (c.-à-d. Supprimez le dernier chiffre), puis définissez l'état. Cela devrait suffire à faire fonctionner le bouton clair.

Ajoutez maintenant le texte suivant à l'instruction if dans appuyez sur () :

 else if (valeur! = 'Go' && nombre <1000000). {
  nombre + = valeur;
  this.setState ({numéro});
}

Donc, si Go n'a pas été pressé et que sa valeur est inférieure à un million (vous devez vous arrêter quelque part - les téléphones ne sont pas si rapides), ajoutez-la à l'arrière (interprétez-la comme une chaîne au lieu de entier) et encore, définissez l'état. Chaque bouton devrait fonctionner.

Il ne reste plus que le bouton Go .

Ajouter des écrans à votre application Android

Lorsque le bouton Go est vous souhaitez masquer le clavier et afficher un écran de progression. Pour cela, vous avez besoin d’une autre variable d’état, un booléen, ajoutez-la donc à la propriété de classe d’état, c.-à-d.

 state = {
  numéro: 123456,
  traitement: faux
};

Ajoutez également un chèque pour Go dans la fonction appuyez sur :

 else if (valeur === 'Go') {
  this.setState ({processing: true});
}

Créez ensuite composants / Processing.js :

 import Réagissez à partir de 'react';
importer des styles à partir de 'styled-components / native';

const ProcessingBox = styled.Text`
  flex: 6;
  taille de police: 30;
  text-align: center;
  text-align-vertical: center;
  famille de polices: Orbitron-Bold;
  La couleur rouge;
  couleur de fond: RGB (29, 31, 33);
  rembourrage en haut: 10px;
  rembourrage en bas: 10px;
`;

export default () => (
   Traitement 
)

Ajoutez-le à votre composants / index.js :

 export {default as Processing} de './Processing';

Importez-le ensuite en haut de votre App.js :

 import {Container, Header, Input, Keypad, ButtonRow, Processing} à partir de './components';

Et utilisez le traitement booléen pour décider de le rendre, soit à l'aide du clavier:

 {state.processing? (
  
): (
  
    
    
    
    
  
)}

Ceci vérifie si state.processing est vrai et, si c'est le cas, affiche le traitement. Dans le cas contraire, montrez le clavier.

Calculer les facteurs premiers

Le moyen le plus simple de décomposer un nombre en facteurs premiers consiste à parcourir en boucle tous les nombres compris entre 2 et num / 2 (car toute valeur supérieure à ] num / 2 ne sera pas un facteur) et vérifiez si elle se divise. Cependant, qu'en est-il du numéro 4? Ce n'est pas premier. Nous devrions donc aussi vérifier si chaque facteur est premier.

Un algorithme intelligent est décrit ici . Commencez par 2 - divisez num par 2 et ajoutez 2 pour chaque cas à la liste jusqu'à ce qu'elle ne se divise plus.

 while (num% 2 == 0) {
  addFactor (2);
  num = num / 2;
}

Now num sera étrange. Commencez le même processus à partir de 3 sauf aller jusqu'à la racine carrée de num en augmentant de 2 (uniquement les nombres impairs):

 pour (int i = 3; i <= Math.floor (Math. sqrt (num)); i + = 2) {
  tandis que (num% i == 0) {
    add_factor (i);
    num = num / i;
  }
}

Notez que vous devez utiliser floor en JavaScript pour traiter des problèmes tels que la racine carrée, car tous les nombres en JavaScript sont des flottants (en réalité doubles).

De même, continuez à ajouter le diviseur en tant que facteur jusqu'à ce qu'il ne reste plus de reste. .

La dernière étape consiste à vérifier si le nombre qu'il vous reste est supérieur à 1. Si c'est le cas, il doit être premier!

 if (num> 1) {add_factor (num); }

Vous allez tout organiser sous peu.

Maintenant que vous avez le code, vous devez afficher les résultats.

Afficher les listes dans React Native

Pour afficher les listes, vous devez utiliser un React Native. Afficher la liste, dans notre distribution, une FlatList . Cela prend une liste de valeurs (objets) appelée données et un moyen de rendre chaque élément appelé renderItem .

   {item.key} }
/>

Remplacer composants / Processing.js par ce qui suit:

 import Réagissez à partir de 'react';
importer {FlatList} de 'react-native';
importer des styles à partir de 'styled-components / native';

const ProcessingBox = styled.View`
  flex: 6;
  couleur de fond: RGB (29, 31, 33);
  rembourrage en haut: 10px;
  rembourrage en bas: 10px;
`;

const Header = styled.Text`
  taille de police: 30;
  text-align: center;
  text-align-vertical: center;
  famille de polices: Orbitron-Bold;
  La couleur rouge;
  rembourrage en haut: 10px;
`;

const Item = styled.Text`
  taille de police: 20;
  text-align: center;
  text-align-vertical: center;
  famille de polices: Audiowide-Regular;
  couleur: brique réfractaire;
`;

export default () => (
  
    
Traitement
{item.key} }     />   
)

Vous avez donc un ProcessingBox un Header et un Poste qui sont combinés lors de l'exportation. Lorsque vous cliquez sur Go :

 Traitement

Tirer ensemble votre application native React

Pour que cela fonctionne avec l'application, vous devez contrôler le rendu depuis l'extérieur. , modifiez donc la méthode de rendu comme suit:

 export default ({running, factor, press}) => (
  
    {fonctionnement ? (
      
Traitement
    ): (       
Terminé
    )}      {item.key} }     />     {!fonctionnement && (       

Ici, la commande prend en compte trois variables, qui contrôlent l'en-tête affiché, les facteurs premiers étant affichés et la fonction utilisée pour changer l'état parent (la même fonction utilisée lorsque des boutons sont enfoncés), respectivement.

FlatList a été remplacé par List un composant stylé permettant de contrôler la taille du rendu de la liste. Ajoutez ce qui suit à Processing.js :

 const List = styled.FlatList`
  flex: 5;
`;

Il existe également un Button qui est votre propre contrôle. Importez-le avec import {Button} de '.'; .

Passez maintenant à App.js et modifiez l'étiquette dans . Render () ` to:

 

Vous transmettez donc les trois paramètres dont nous venons de parler, les deux premiers de l’État. Modifiez maintenant la propriété state pour inclure ces nouvelles valeurs:

 state = {
  numéro: 123456,
  facteurs: [],
  traitement: faux,
  en cours d'exécution: faux
};

Maintenant, en dessous de ceci, dans la classe App définissez la fonction de calcul des nombres premiers:

 getPrimes = (N) => {
  facteurs constants = [];
  soit num = N;
  tandis que (num% 2 === 0) {
    facteurs.push ({clé: '2'});
    num / = 2;
  }
  laisse moi; pour (i = 3; i <= Math.floor(Math.sqrt(num)); i += 2) {
    while (num % i === 0) {
      factors.push({ key: `${i}` });
      num /= i;
    }
  }
  if (num > 1) {factor.push ({key: `$ {num}`}); }
  facteurs de retour;
};

Enfin, modifiez la fonction appuyez sur pour obtenir ces facteurs et définissez leur utilisation (et répondez correctement au bouton Back dans l'écran de traitement:

 appuyez sur = (valeur) => {
  let {nombre} = this.state;
  if (valeur === 'Effacer') {
    nombre = Math.floor (nombre / 10);
    this.setState ({numéro});
  } else if (valeur! == 'Go' && valeur! == 'Retour' && nombre <1000000) {
    if (nombre === 0) nombre = valeur; else nombre + = valeur;
    this.setState ({numéro});
  } else if (valeur === 'Go') {
    this.setState ({processing: true});
    let facteurs = this.getPrimes (nombre);
    this.setState ({running: false});
    this.setState ({facteurs});
  } else if (valeur === 'Retour') {
    this.setState ({processing: false});
  }
};

Maintenant, lorsque vous exécutez l'application et appuyez sur Go vous devriez voir une liste des facteurs premiers, ainsi qu'un bouton Back qui vous ramènera en arrière.

 Terminé

La modification du nombre et le fait de cliquer à nouveau sur Go devrait générer une nouvelle liste de facteurs. Félicitations, vous avez terminé l’application!

Définition du nom et de l’icône de votre application Android

Pour que tout soit beau une fois déployé sur le téléphone, vous devez définir le nom et l’icône. Vous pouvez définir le nom dans android / app / src / main / res / values ​​/ strings.xml :


     Prime Components 

Pour l’icône, il est préférable d’ouvrir votre projet dans Android Studio (utilisez le répertoire android ) et de créer un répertoire ‘dessinable’ dans actifs . Cliquez ensuite avec le bouton droit de la souris et dites Nouveau -> Image Asset . Cela vous permettra d'importer votre grande icône et d'écraser ic_launcher qui est utilisé pour l'icône de lanceur, générant toutes les versions dont vous avez besoin pour le Play Store. Redéployez avec and-run-native et vous devriez voir apparaître un nom et une icône sur la liste des applications.

Si vous rencontrez un problème de regroupement lors de la prochaine exécution de -android sous Android, il existe un correctif Stack Overflow qui fonctionne.

Ajouter une authentification avec AppAuth

L'authentification n'est peut-être pas cruciale pour un calculateur, mais il est souvent sage de le faire. ajoutez alors que les fonctionnalités de votre application restent simples. Lorsque vous ajoutez des fonctionnalités, vous souhaiterez peut-être donner aux utilisateurs la possibilité de sauvegarder un historique de calcul ou de partager leur travail avec des amis. Okta simplifie grandement la gestion des utilisateurs.

Ajoutez d’abord un nouveau composant Login.js en copiant Button.js et en modifiant la taille de la police à 20, le rayon de la frontière et la marge à zéro, et la couleur de fond légèrement plus claire, comme RGB (49, 51, 53) .

 import Réagissez à partir de 'réagit';
importer des styles à partir de 'styled-components / native';

const ButtonBox = styled.TouchableHighlight.attrs ({
  underlayColor: '# 193441',
}) `
  flex: 1;
  align-items: centre;
  justifier-contenu: centre;
  couleur de fond: RGB (49, 51, 53);
  rayon de bordure: 0;
  marge: 0;
`;

const ButtonText = styled.Text`
  taille de police: 20;
  famille de polices: Orbitron-Bold;
  couleur orange;
`;

export par défaut Login = ({func, text}) => (
   func (text)}>
     {text} 
  
);

Add it to index.js in the components directory, import it at the top of App.js and add loggedin: false to the App class state. Finally, below the control in render put a switch to determine what to print on the login button:

    {state.loggedin ? (
      
    ) : (
      
    )}

When you re-run the project you should see a new login button.

Note: if you are not seeing any changes from your code reflected in the react-native run-android deploy it might be because you removed internet permissions in your AndroidManifest.xml which React Native uses to connect the app with your development machine. Simply replace it above the application directive:


Next, you need to sign up for a free Okta developer account. Then login and navigate to Applications > Add Application. Select Native and click Next. Choose a name and click Done. Note your Login redirect URI and theClient ID since you have to add them to your app.

Now install react-native-app-auth and link it.

react-native install react-native-app-auth@4.0.0
react-native link react-native-app-auth

Now add the following to the defaultConfig section of the android config in android/app/build.gradleusing the base of your Redirect URLe.g. com.oktapreview.dev-628819.

defaultConfig {
    applicationId "com.prime_components"
    ...
    manifestPlaceholders = [
        appAuthRedirectScheme: "{redirectBase}"
    ]
}

At the top of your App.js import Alert from the React Native package and authorize and revoke from the App Auth package:

import { Alert } from 'react-native';
import { authorize, revoke } from 'react-native-app-auth';

Before you define your App class, add a config variable with the details of your Okta app:

const config = {
  issuer: 'https://{yourOktaDomain}/oauth2/default',
  clientId: '{clientId}',
  redirectUrl: '{redirectUrl}',
  additionalParameters: {},
  scopes: ['openid', 'profile', 'email', 'offline_access']
};

You can find the value for {yourOktaDomain} on the Okta dashboard when you are logged in.

Now add accessToken: '' to your state initialization and add the following two functions to your App class:

  state = {
    ...
    accessToken: '',
  };

...

authorize = async () => {
  try {
    const authState = await authorize(config);

    this.setState({
      loggedin: true,
      accessToken: authState.accessToken
    });
  } catch (error) {
    Alert.alert('Failed to log in', error.message);
  }
};

revoke = async () => {
  try {
    const { state } = this;
    await revoke(config, {
      tokenToRevoke: state.accessToken,
      sendClientId: true
    });
    this.setState({
      accessToken: '',
      loggedin: false
    });
  } catch (error) {
    Alert.alert('Failed to revoke token', error.message);
  }
};

Finally add func={this.authorize} as an attribute on your login button and func={this.revoke} to your logout button.

{state.loggedin ? (
  
) : (
  
)}

Now when you re-run and click Login you should be redirected to an Okta login screen. Using the login details of a user attached to your Okta application should redirect you back to your app, now showing a logout button. When you click on logout, and then log in again, you’ll notice you’re not prompted to log in again. To fix this, you can add a login prompt to additionalParameters.

const config = {
  ...
  additionalParameters: {prompt: 'login'},
  scopes: ['openid', 'profile', 'email', 'offline_access']
};

This ensures the user is prompted for their password every time.

Launch Your Android App on the Play Store

The last step is publishing what you have done on the Play Store. The standard docs have great advice on this as well as a pre-launch checklist. Besides reading the developer policies (which you should do) you need to sign up for a developer account and pay the $25 registration fee. Then you need to create an icon.

Create an Icon for Your Android App

It not easy making something unique and striking as well as relevant to your app. For this tutorial, check out Iconic (a mobile app on the Play Store) which links into free icon repositories and lets you edit them. With it you can create graphics like the following:

App icon

Create an Android Application in the Play Store Console

Open up the Play Console and click Create Application. Select the default language, enter a name and click Create. You will now see a lot you need to fill out in the store listing, including a least:

  • A short description
  • A long description
  • Two screenshots
  • A feature graphic
  • A high-res icon (512×512)
  • Categorization (app type and category)
  • Email address

You also need to specify if you are providing a privacy policy.

For the feature graphic, you need something that is exactly 1024×500. You can get royalty free images from Pixabay (for example this one) though you will have to resize them with something like Gimp (and make sure on Pixabay that the image is free for commercial use!).

Once done click Save Draft and you should see a large green tick on the side panel next to Store listing.

Store listing

This shows you have completed the listing details and still need to fill out the content rating form as well as pricing and distribution. Although before you can do that you need to put out an app release.

App Releases

Click on App release in the sidebar. You should see a list of tracks for various testing phases. Click on MANAGE in the production track. Then click CREATE RELEASE.

You’ll see a message about using App signing by Google Play. This is a new feature which puts the managing of keys into Google’s hands. The reason you’d want this is simple: if you manage your own keys and you lose them you will no longer be able to release updates for your app. In fact, you’d have to create a new one under a new name! However, note that this is an option. Here you’ll be using it. For that, you will need to generate an upload key.

  • Open your app in Android Studio by browsing to the android folder of your React Native project
  • Go to Build > Generate signed bundle / APK
  • Select APK and click Next
  • Under Key store path click Create new
  • Choose a path like /home/karl/keystores/android.jks
  • Choose passwords for the keystore and key
  • Enter the certificate information (note: this won’t be displayed in the app, just the certificate)

Keystore

Click OK and click Next. Select both the V1 and the V2 signature version and click Finish. A build should start after which you should see both app-x86-release.apk and app-armeabi-v7a-release.apk inside of android/app/release in your project (one for each device architecture).

If you try upload these apps now you will get an error saying “Your app is using permissions that require a privacy policy”. This is because React Native adds app permissions behind the scenes. To force them to not be included you must first add xmlns:tools="http://schemas.android.com/tools" to the manifest element of android/app/src/main/AndroidManifest.xml and then add the following (see the previous link for more):




You can also remove the alert window and internet uses-permission since we’re not using them. Re-build and re-upload. Put in some release notes and click SAVE.

Content Rating

Now with the release made you can enter in rating information. Go to Content rating in the sidebar, read the message about IARC and click CONTINUE.

For type, click ‘Utility at the bottom. Then a questionnaire will show. You can click **No** for all the fields. Click SAVE QUESTIONNAIRE. After this, you can click CALCULATE RATING. You will see a list of how your app will be rated. Scroll to the bottom and click APPLY RATING`.

That should put a tick next to Content rating. The only thing left is pricing and distribution.

Pricing & Distribution

This section should also be straight-forward since you are not charging for your app. Simply select the Available button at the top of the country columns to select all 143 countries as available. Then select no for child-directed and contains ads. Then check the Content Guidelines and US export laws checkboxes and click SAVE DRAFT.

At the top of the Play console, it should say Ready to publish.

Releasing Your Android App

Go to App release and click EDIT RELEASE. Scroll to the bottom and click REVIEW. Click on START ROLL-OUT TO PRODUCTION. Click Confirm. Your app should now say Pending publication at the top. You now need to wait a few hours for Google to check your app before releasing it.

NOTE: It might be worthwhile using a testing release first to make sure everything works before you release to production, i.e. to everyone!

Learn More About Android, React Native, and Secure User Management

Congrats! You have just finished choosing, designing, and developing an Android app using React Native, as well as publishing it to the Play Store. I hope you found this tutorial enlightening. Go and make something useful and publish it!

If you’re interested in learning more about app design, React Native or secure user management with Okta, check out the following resources:

Like what you learned today? Follow us on Twitterlike us on Facebookcheck us out on LinkedInand subscribe to our YouTube channel.






Source link