1
00:00:02,520 --> 00:00:08,550
Avant de poursuivre le processus de génération ou de publication et donc de le transférer dans les magasins

2
00:00:08,550 --> 00:00:10,300
d'applications, continuons de le configurer.

3
00:00:10,300 --> 00:00:15,330
Maintenant, pour un, il y a des blancs ici comme la description qui manque que vous

4
00:00:15,330 --> 00:00:16,440
pourriez ajouter en

5
00:00:16,440 --> 00:00:21,540
ajoutant une clé de description ici avec du texte et ce serait la description qui apparaît ici.

6
00:00:21,660 --> 00:00:24,640
Important, ce n'est pas une description qui apparaît dans

7
00:00:24,640 --> 00:00:28,950
les magasins d'applications, c'est vraiment juste une description qui s'affiche ici et vous pouvez

8
00:00:28,950 --> 00:00:34,200
en apprendre plus sur la description, toutes les autres clés que vous pouvez définir ici dans cette page.

9
00:00:34,230 --> 00:00:37,110
Il y a beaucoup de paramètres que vous pouvez définir après tout.

10
00:00:37,110 --> 00:00:42,780
Maintenant, ce qui m'intéresse en ce moment, c'est la partie icône et écran de démarrage car c'est l'icône que les gens

11
00:00:42,780 --> 00:00:44,610
verront sur l'écran d'accueil, bien sûr

12
00:00:44,610 --> 00:00:49,920
pas encore parce que pour le moment nous ne publions pas les applications sur l'App Store, mais cela va changer

13
00:00:50,700 --> 00:00:51,670
et l'écran de

14
00:00:51,690 --> 00:00:54,140
démarrage, eh bien, c'est ce que les utilisateurs voient

15
00:00:54,330 --> 00:00:58,620
lorsque notre application se charge et les deux sont généralement des éléments que vous souhaitez personnaliser.

16
00:00:58,680 --> 00:01:05,810
Maintenant, expo vous donne une icône et un écran de démarrage hors de la boîte, mais les deux ne sont que des espaces réservés vides, à droite,

17
00:01:05,820 --> 00:01:06,120
donc

18
00:01:06,120 --> 00:01:08,720
ce n'est pas trop étonnant, au lieu de cela,

19
00:01:08,730 --> 00:01:12,590
nous voulons fournir notre propre icône, notre propre image de l'écran de démarrage ici.

20
00:01:12,600 --> 00:01:17,850
Maintenant, vous êtes vraiment flexible quant à ce que vous fournissez ici, mais en général, c'est

21
00:01:17,850 --> 00:01:22,840
une bonne idée de fournir une icône dans la résolution 1024 x 1024, donc une

22
00:01:22,890 --> 00:01:30,720
icône carrée comme entrée et pour l'écran de démarrage, vous pouvez créer un écran de démarrage comme décrit dans la documentation officielle où vous

23
00:01:30,720 --> 00:01:35,550
pouvez en savoir plus sur la façon dont vous pouvez créer un tel écran

24
00:01:35,550 --> 00:01:38,520
de démarrage, comment vous pouvez le structurer, etc.

25
00:01:38,520 --> 00:01:45,600
Maintenant, j'ai préparé quelque chose pour vous que vous pouvez utiliser pour suivre maintenant que vous ne devriez pas utiliser pour un déploiement réel parce

26
00:01:45,660 --> 00:01:51,930
que ces actifs sont juste pour ce cours, pas pour que vous les utilisiez dans votre application que vous prévoyez de déployer

27
00:01:51,930 --> 00:01:57,870
et pour celle jointe que vous trouvez les icônes. fichier zip.

28
00:01:58,000 --> 00:02:04,270
Maintenant, si vous décompressez cela, là-dedans, vous trouverez des endroits. fichier png que vous pouvez bien sûr glisser-déposer dans le

29
00:02:04,270 --> 00:02:05,500
dossier des actifs,

30
00:02:05,500 --> 00:02:08,840
vous pouvez également supprimer l'icône. fichier png si vous le souhaitez.

31
00:02:08,890 --> 00:02:15,460
Vous pouvez également supprimer le splash. fichier png, car dans ce dossier joint, vous trouverez

32
00:02:15,580 --> 00:02:19,720
également cette icône de démarrage. fichier png que vous pouvez bien sûr aussi glisser-déposer ici.

33
00:02:19,720 --> 00:02:24,030
Maintenant, ce ne sont que quelques icônes que j'ai créées que nous pouvons utiliser maintenant

34
00:02:24,280 --> 00:02:29,590
et de retour dans l'application. fichier json, nous pouvons maintenant pointer sur les icônes personnalisées. Important, vous devez fournir des

35
00:02:29,600 --> 00:02:31,720
fichiers png comme je le fais ici.

36
00:02:31,720 --> 00:02:38,170
Alors maintenant, pour l'icône, nous pouvons pointer sur les actifs / lieux. png et pour le splash, on peut

37
00:02:38,260 --> 00:02:46,840
pointer que assets / splash_icon. png. Maintenant, comme couleur de fond, nous pouvons utiliser une

38
00:02:46,840 --> 00:02:47,940
couleur noir foncé

39
00:02:48,010 --> 00:02:55,180
comme le code hexadécimal # 171717, cela devrait être une couleur de code hexadécimal comme celle-ci et le mode de redimensionnement ici peut

40
00:02:55,180 --> 00:03:00,610
être défini pour contenir ou couvrir, la couverture étirera essentiellement l'icône à prendre la largeur et la

41
00:03:00,610 --> 00:03:06,190
hauteur entièrement disponibles, contiennent conservera la taille de l'icône, la centrera et aura cette couleur d'arrière-plan derrière l'icône.

42
00:03:06,190 --> 00:03:10,090
Maintenant, si nous le faisons, nous pouvons déjà voir le résultat de

43
00:03:10,240 --> 00:03:18,730
cela si nous commençons juste par npm, donc le serveur comme nous l'avons fait plusieurs fois dans ce cours ou l'expo démarre et nous le lançons ensuite sur

44
00:03:18,730 --> 00:03:26,010
un émulateur, Android ou iOS comme je je le fais ici. Maintenant, cela le lance là-bas et maintenant vous voyez, c'est l'écran de démarrage

45
00:03:26,200 --> 00:03:31,510
qui en prend déjà un nouveau, avec l'image là-dedans qui est notre grand mais c'est exprès pour que nous

46
00:03:31,520 --> 00:03:35,920
puissions le voir clairement et la couleur d'arrière-plan qui est légèrement différente afin que vous avez

47
00:03:35,920 --> 00:03:40,180
également une chance de voir cela, bien sûr, vous pouvez choisir la même couleur pour

48
00:03:40,180 --> 00:03:42,480
avoir un écran de démarrage transparent ici.

49
00:03:42,520 --> 00:03:45,510
Donc, cela fonctionne et attendons que cela se termine et

50
00:03:45,710 --> 00:03:50,160
voici l'application en cours d'exécution et maintenant vous voyez votre icône ici aussi si

51
00:03:50,170 --> 00:03:55,240
vous allez dans le sélecteur de tâches. Vous voyez, ça n'a pas l'air génial avec l'arrière-plan, mais

52
00:03:55,240 --> 00:03:56,720
c'est quelque chose que nous pouvons

53
00:03:56,740 --> 00:04:02,740
améliorer, mais voici l'icône en général, donc cela fonctionne, nous voyons à la fois l'écran de démarrage et l'icône et sur iOS, ce

54
00:04:02,770 --> 00:04:05,610
serait la même chose. Maintenant, comme vous pouvez

55
00:04:05,610 --> 00:04:08,230
le constater, l'icône n'est pas si belle sur Android.

56
00:04:08,250 --> 00:04:13,260
La raison en est qu'Android, selon la version d'Android que vous utilisez sur

57
00:04:13,650 --> 00:04:20,310
votre appareil, utilise différentes icônes, les versions plus récentes d'Android utilisent ces icônes dites adaptatives qui sont ces

58
00:04:20,310 --> 00:04:25,980
icônes arrondies où vous avez votre icône au milieu puis une couleur d'arrière-plan ou une

59
00:04:25,980 --> 00:04:28,060
image d'arrière-plan même derrière eux,

60
00:04:28,110 --> 00:04:30,900
les anciennes versions utilisaient des icônes carrées.

61
00:04:30,900 --> 00:04:38,930
Maintenant, vous pouvez répondre à cela en fournissant une configuration plus détaillée pour Android et également

62
00:04:39,000 --> 00:04:45,770
pour iOS si vous le souhaitez. Au lieu d'avoir cette clé d'icône générale ici, vous pouvez configurer des paramètres spécifiques à la plate-forme

63
00:04:45,770 --> 00:04:48,800
et c'est aussi quelque chose que vous avez appris dans les documents officiels bien sûr.

64
00:04:48,870 --> 00:04:55,380
Là, vous pouvez trouver des informations sur la façon dont vous pouvez configurer le splash d'icônes,

65
00:04:55,380 --> 00:05:01,150
c'est bien, mais aussi sur la façon dont vous pouvez configurer iOS d'une manière

66
00:05:01,260 --> 00:05:07,310
spécifique et là, vous pouvez configurer une icône spécifique pour iOS si vous souhaitez l'utiliser.

67
00:05:07,480 --> 00:05:13,710
Bien sûr, la même chose est vraie pour l'écran de démarrage, vous pouvez donc essentiellement ajouter un nœud iOS

68
00:05:13,720 --> 00:05:21,910
à votre configuration, nous l'avons déjà ici même et là-bas, vous pouvez également ajouter une icône, puis également une configuration de démarrage qui ressemble

69
00:05:21,910 --> 00:05:27,450
exactement ou qui ressemblerait exactement à la configuration racine que nous avons ici, mais maintenant vous

70
00:05:27,520 --> 00:05:33,730
pouvez essentiellement remplacer ces paramètres généraux de niveau racine et avoir une icône spécifique pour iOS et un

71
00:05:33,730 --> 00:05:36,170
écran de démarrage spécifique pour iOS.

72
00:05:36,190 --> 00:05:41,620
C'est donc quelque chose que vous pourriez faire et la même chose est vraie pour Android et vous le trouverez bien sûr également

73
00:05:41,620 --> 00:05:42,820
dans les documents officiels.

74
00:05:43,000 --> 00:05:49,050
Vous pouvez ajouter une clé Android ici à votre application. fichier json, puis cela contient un objet pour ainsi

75
00:05:49,060 --> 00:05:55,780
dire, là, vous pouvez également mettre en place une icône et une configuration de démarrage comme je l'ai expliqué pour

76
00:05:55,840 --> 00:05:58,900
iOS et maintenant ces paramètres seraient pris pour Android,

77
00:05:59,140 --> 00:06:04,120
iOS car il n'a pas de paramètres spécifiques dans mon exemple ici utiliserait toujours les

78
00:06:04,120 --> 00:06:05,190
paramètres généraux là-haut.

79
00:06:05,200 --> 00:06:10,690
Maintenant, la chose intéressante est pour Android, vous ne pouvez pas simplement définir un écran de

80
00:06:10,780 --> 00:06:18,580
démarrage d'icônes spécifique, vous pouvez également définir une icône adaptative ici avec la configuration des icônes adaptatives, qui n'est pas disponible pour iOS

81
00:06:18,580 --> 00:06:21,820
car les icônes adaptatives sont exclusives à Android.

82
00:06:21,820 --> 00:06:29,450
L'icône adaptative prend un objet Javascript pour ainsi dire comme une valeur de configuration, pas une chaîne et cet objet peut

83
00:06:29,680 --> 00:06:35,950
avoir trois clés - une image de premier plan, une couleur d'arrière-plan ou une image d'arrière-plan.

84
00:06:35,950 --> 00:06:40,960
Vous avez maintenant une couleur d'arrière-plan ou une image d'arrière-plan, mais vous devez toujours avoir une image

85
00:06:40,960 --> 00:06:41,850
de premier plan.

86
00:06:41,890 --> 00:06:46,780
Maintenant, ici, nous pouvons ajouter une image de premier plan, donc cette clé ici

87
00:06:46,780 --> 00:06:53,410
et la couleur d'arrière-plan qui devrait être un code hexadécimal à six chiffres comme vous pouvez le voir et faisons

88
00:06:53,520 --> 00:06:59,590
rapidement cela ici et maintenant nous pouvons définir la couleur d'arrière-plan pour dire que le code # 171717

89
00:06:59,590 --> 00:07:04,750
et le l'image de premier plan peut maintenant être définie sur notre icône, bien que

90
00:07:04,750 --> 00:07:07,900
pour cela, je vous recommande d'utiliser une icône spécifique

91
00:07:08,020 --> 00:07:16,990
que vous trouverez également ci-jointe, les lieux adaptatifs. fichier png que vous pouvez faire glisser et déposer dans votre dossier d'actifs et qui place-adaptatif. Le fichier png peut maintenant être utilisé

92
00:07:17,410 --> 00:07:23,800
ici comme image de premier plan, afin que nous puissions pointer sur les actifs, puis sur les

93
00:07:23,830 --> 00:07:25,630
lieux adaptatifs. png.

94
00:07:25,690 --> 00:07:30,550
Maintenant, cette icône, l'icône des lieux adaptatifs est transparente, c'est toujours l'icône mais elle a

95
00:07:30,550 --> 00:07:34,990
un fond transparent, contrairement à l'autre icône et qui permettra donc à Android de

96
00:07:34,990 --> 00:07:39,640
la placer devant cette couleur de fond ou image de fond que vous avez fournie

97
00:07:39,640 --> 00:07:43,650
et automatiquement autour des coins pour vous et ainsi de suite.

98
00:07:43,660 --> 00:07:51,400
Donc, si nous enregistrons maintenant ceci et cela reconstruit donc et pour être sûr qu'il en tient vraiment compte,

99
00:07:51,430 --> 00:07:53,910
je redémarrerai mon serveur d'expo ici.

100
00:07:54,040 --> 00:08:00,370
Si nous lançons maintenant cela sur Android et que je ferme également le client expo ici et que je

101
00:08:03,390 --> 00:08:05,490
le réexécute sur Android, nous

102
00:08:05,490 --> 00:08:08,990
devrions voir qu'une fois que cela a redémarré, nous avons

103
00:08:09,000 --> 00:08:12,540
maintenant une icône plus agréable qui semble un peu meilleure.

104
00:08:12,600 --> 00:08:14,060
Attendons donc que cela se lance,

105
00:08:14,070 --> 00:08:19,560
c'est toujours l'écran de démarrage tel que nous l'avons configuré auparavant, je n'ai pas non plus défini d'écran de démarrage spécifique à Android que nous

106
00:08:19,560 --> 00:08:21,700
pourrions bien sûr mais ici je ne l'ai pas

107
00:08:21,720 --> 00:08:25,810
fait, nous avons donc bien sûr obtenu la même chose écran de démarrage comme précédemment dans ce module

108
00:08:26,110 --> 00:08:31,440
et si vous regardez maintenant l'icône, vous pourriez malheureusement encore voir l'ancien. La nouvelle sera prise en compte une fois

109
00:08:31,440 --> 00:08:37,320
que nous aurons créé cette application en tant qu'application autonome et que nous la distribuerons aux magasins d'applications.

110
00:08:38,100 --> 00:08:43,110
En général, la recommandation est que pour Android, vous définissez une telle icône adaptative car vous couvrez plus de

111
00:08:43,110 --> 00:08:49,470
versions Android, ce qui ne fait pas de mal, bien sûr. Définir une telle icône générale n'est pas non plus une mauvaise idée

112
00:08:49,470 --> 00:08:50,040
et bien

113
00:08:50,070 --> 00:08:54,780
sûr, nous pouvons utiliser une seule et même icône pour iOS et Android ou vous définir des icônes spécifiques

114
00:08:54,810 --> 00:09:01,110
pour iOS et pour Android, comme mentionné pour Android éventuellement, l'icône adaptative. Si vous souhaitez en savoir plus sur le processus de

115
00:09:01,110 --> 00:09:06,180
création et de gestion des icônes et des écrans de démarrage, vous trouverez ci-joint les documents d'exposition officiels

116
00:09:06,180 --> 00:09:11,160
qui plongent profondément dans les différentes options que vous avez là-bas et ce que vous devez considérer.