1
00:00:02,500 --> 00:00:07,190
Maintenant, j'ai désactivé la liaison ici afin de ne pas avoir tous ces avertissements et erreurs concernant le style de code.

2
00:00:07,190 --> 00:00:10,550
Bien sûr, vous pouvez ajuster votre code pour suivre ce style,

3
00:00:10,640 --> 00:00:12,820
c'est une préférence personnelle à la fin.

4
00:00:12,830 --> 00:00:19,070
Maintenant, ce que je veux faire ici, c'est que je veux vous montrer comment vous pouvez bien sûr changer le code,

5
00:00:19,130 --> 00:00:24,390
mais aussi comment nous pourrions ajouter une fonctionnalité native dans une telle application React Native vanilla.

6
00:00:24,610 --> 00:00:28,780
Donc, pour cela, je vais d'abord simplifier beaucoup cette application

7
00:00:28,850 --> 00:00:37,250
de départ, je vais simplement me débarrasser de tout ce contenu ici et ajouter simplement un style de base configuré ici avec

8
00:00:37,400 --> 00:00:44,090
flex one, justifier le centre de contenu et aligner les éléments centre pour centrer mon contenu sur l'écran.

9
00:00:44,090 --> 00:00:46,550
Débarrassez-vous de cette chose ici et

10
00:00:46,760 --> 00:00:54,150
de toutes ces importations ici, je veux utiliser la feuille de style, je veux utiliser la vue et je veux utiliser

11
00:00:54,290 --> 00:00:59,720
le bouton parce que ce que je veux ajouter est la fonctionnalité de sélection d'image.

12
00:00:59,750 --> 00:01:01,660
Alors là, je reviens ma

13
00:01:02,750 --> 00:01:08,100
vue et mon bouton et sur le bouton, je dis prendre une image puis dans onPress,

14
00:01:08,240 --> 00:01:10,460
je veux ouvrir le sélecteur d'image.

15
00:01:10,460 --> 00:01:11,990
Maintenant, comment pouvons-nous ajouter cela?

16
00:01:12,230 --> 00:01:20,030
Maintenant qu'il s'agit d'un projet React Native sans expo en aucune façon, nous ne pouvons pas facilement utiliser les API expo ici.

17
00:01:20,040 --> 00:01:25,530
Il existe en fait un moyen de les utiliser et j'y reviendrai plus tard dans ce

18
00:01:25,530 --> 00:01:30,690
module, mais vous devrez configurer quelques éléments. Donc, ce que nous pouvons faire à la

19
00:01:30,690 --> 00:01:34,660
place, c'est que nous pouvons faire quelque chose que vous ferez beaucoup si vous

20
00:01:34,730 --> 00:01:39,810
travaillez avec une application React Native vanille, nous recherchons par exemple le sélecteur d'image React Native pour trouver

21
00:01:39,810 --> 00:01:43,060
un package qui nous aide à cela, par exemple exemple celui-ci,

22
00:01:43,320 --> 00:01:49,140
le package de sélecteur d'image React Native et maintenant nous pouvons l'installer car maintenant nous pouvons apporter n'importe quel package tiers,

23
00:01:49,320 --> 00:01:55,080
qu'il ajoute ou non des fonctionnalités natives dans votre application. Auparavant, avec expo, cela n'était pas vraiment possible, vous

24
00:01:55,080 --> 00:01:59,520
ne pouviez apporter que des packages tiers qui n'utilisaient pas les fonctionnalités des appareils natifs,

25
00:01:59,520 --> 00:02:01,380
maintenant vous n'avez aucune restriction.

26
00:02:01,470 --> 00:02:03,060
Alors maintenant,

27
00:02:03,360 --> 00:02:09,810
nous pouvons ajouter ceci et ici nous pouvons l'installer en suivant les instructions d'installation

28
00:02:09,810 --> 00:02:18,690
ici, donc en revenant dans notre projet et en y exécutant npm install --save, puis ici c'est le sélecteur d'image

29
00:02:21,970 --> 00:02:25,430
React Native, comme ceci. Soit dit en passant, vous pouvez continuer à exécuter

30
00:02:25,450 --> 00:02:30,730
ce processus ici et vous devriez le faire pour que le code change une fois que vous avez enregistré vos fichiers soient récupérés et envoyés à vos appareils.

31
00:02:30,970 --> 00:02:34,310
Attendons donc que cette installation se termine maintenant.

32
00:02:34,330 --> 00:02:35,090
Maintenant, c'est fait,

33
00:02:35,110 --> 00:02:35,860
cela

34
00:02:36,800 --> 00:02:39,240
a pris un certain temps et maintenant nous devons

35
00:02:39,240 --> 00:02:41,900
l'installer et la bonne chose est que ce package est

36
00:02:41,910 --> 00:02:44,770
très facile à installer, vous ne devez exécuter que cette commande

37
00:02:44,790 --> 00:02:47,250
ici - Lien React Native, sélecteur d'image React Native.

38
00:02:47,340 --> 00:02:49,270
Alors lancez ceci dans

39
00:02:50,400 --> 00:02:53,550
votre projet, comme ça et vous devriez être bon.

40
00:02:53,730 --> 00:02:57,870
Maintenant, je dirai qu'il existe des packages tiers qui demandent plus d'efforts, cela

41
00:02:57,870 --> 00:03:00,960
dépend vraiment du package. Pour expo, c'était évidemment

42
00:03:00,960 --> 00:03:05,540
très facile, vous venez d'exécuter expo install, c'était très rapide, n'a pas pris autant de

43
00:03:05,550 --> 00:03:08,720
temps et vous n'avez pas eu besoin de faire autre chose.

44
00:03:08,880 --> 00:03:11,140
Ici, vous devez exécuter une commande supplémentaire, mais

45
00:03:11,270 --> 00:03:12,870
bien sûr, ce n'est

46
00:03:12,870 --> 00:03:16,890
pas trop mal, mais encore une fois, je dirai que tous les packages ne

47
00:03:16,920 --> 00:03:22,950
prennent pas en charge cette commande, certains packages nécessitent beaucoup plus de travail de câblage manuel, un travail manuel où vous

48
00:03:22,950 --> 00:03:28,250
devez réellement plonger dans le Dossiers Android et iOS pour commencer à travailler sur certains fichiers de configuration.

49
00:03:28,290 --> 00:03:33,600
C'est ce que la commande React Native link a fait pour vous, par exemple sur Android si vous

50
00:03:33,600 --> 00:03:39,540
plongez dans le dossier d'application et là, source puis dans le dossier source dans build gradle, vous verrez que là,

51
00:03:42,290 --> 00:03:43,970
cette ligne a été ajoutée.

52
00:03:44,000 --> 00:03:45,710
Ce n'était pas là depuis

53
00:03:45,710 --> 00:03:48,610
le début, cela a été ajouté par la commande React

54
00:03:48,830 --> 00:03:52,250
Native link et pour certains packages, vous devez ajouter ces entrées manuellement,

55
00:03:52,250 --> 00:03:57,080
de nombreux packages prennent en charge la commande link et avec des versions plus récentes de React Native,

56
00:03:57,080 --> 00:04:02,480
certains packages même prend en charge la liaison automatique où cette liaison sera effectuée automatiquement une fois l'installation terminée, mais

57
00:04:02,480 --> 00:04:06,550
tous les packages n'ont pas cette prise en charge, c'est donc quelque chose à savoir.

58
00:04:06,550 --> 00:04:12,680
Dans les coulisses, beaucoup de configuration a été modifiée. Avec cela, nous pouvons maintenant utiliser

59
00:04:13,100 --> 00:04:19,680
ce package, encore une fois comme indiqué dans leurs documents afin que nous puissions ajouter

60
00:04:20,000 --> 00:04:31,050
cette importation ici, ici, puis également ajouter la fonction de sélection d'image ici peut-être et connecter cela à notre bouton et maintenant ici, le sélecteur

61
00:04:34,100 --> 00:04:37,360
d'image fonctionne un peu différemment de l'expo.

62
00:04:37,370 --> 00:04:42,400
Ici, nous appelons sélecteur d'images montrer sélecteur d'images avec des options que nous pouvons configurer, les

63
00:04:42,410 --> 00:04:49,550
options sont configurées comme décrit ici ou décrites dans la documentation en général et ici, je vais juste saisir tout ce code

64
00:04:49,640 --> 00:04:56,120
ici, comme ceci, le copier dans l'image de sélection fonction, débarrassez-vous de cet appel d'état défini, nous ne sommes pas

65
00:04:56,140 --> 00:04:58,510
dans un composant basé sur une classe,

66
00:04:58,510 --> 00:05:00,450
donc ce n'est pas quelque chose

67
00:05:00,460 --> 00:05:03,820
que nous pouvons faire, à la place ici dans le

68
00:05:04,000 --> 00:05:06,560
bloc else je vais simplement consigner l'URI de

69
00:05:06,590 --> 00:05:09,960
réponse qui devrait être le chemin de l'image qui a

70
00:05:10,150 --> 00:05:11,160
été prise,

71
00:05:11,340 --> 00:05:16,330
puis nous avons quelques gestionnaires pour différents scénarios ici et avec cela, voyons si cela fonctionne.

72
00:05:16,330 --> 00:05:17,440
Si nous

73
00:05:20,110 --> 00:05:21,550
enregistrons cela, il devrait

74
00:05:21,550 --> 00:05:28,470
normalement être reconstruit ici, mais en raison de notre nouveau package installé, je quitterai ce processus et réexécuterez run-android

75
00:05:28,490 --> 00:05:33,680
react-native ici maintenant dans mon terminal intégré dans Visual Studio Code et donc,

76
00:05:33,680 --> 00:05:42,270
dans ce dossier de projet et maintenant cela fera réapparaître ce serveur de développement et, plus important encore, il relancera également l'application sur

77
00:05:42,270 --> 00:05:47,750
l'émulateur afin que nous espérons pouvoir le voir là-bas et tester le sélecteur d'images ici.

78
00:05:47,820 --> 00:05:51,060
Attendons donc que cela se termine, que ce processus de construction se termine.

79
00:05:51,060 --> 00:05:58,260
Maintenant, voici l'application qui arrive et si j'appuie dessus, j'obtiens cette superposition, je peux cliquer sur prendre une photo et

80
00:05:58,260 --> 00:05:59,700
rien ne se passe.

81
00:05:59,700 --> 00:06:04,290
La raison en est l'absence d'autorisations et c'est le travail manuel que je voulais dire. Nous devons aller dans

82
00:06:04,290 --> 00:06:11,610
le dossier Android, là dans la source, principale, AndroidManifest qui configure l'application Android et là vous

83
00:06:11,610 --> 00:06:16,770
devez ajouter une nouvelle autorisation. Vous pouvez copier cette autorisation Internet dont vous

84
00:06:16,770 --> 00:06:22,530
aurez toujours besoin pour que l'application Android communique avec le serveur de développement et là, vous pouvez maintenant ajouter l'autorisation

85
00:06:22,530 --> 00:06:29,360
de caméra que vous devez ajouter pour que cette application puisse accéder à la caméra de l'appareil, sinon cela n'est pas pris en charge.

86
00:06:29,370 --> 00:06:35,820
Alors maintenant, nous pouvons réexécuter ce processus, reconstruire l'application et nous assurer que nous prenons ce nouveau paramètre en

87
00:06:35,820 --> 00:06:39,090
compte et avec cela, nous devrions maintenant pouvoir l'ouvrir.

88
00:06:39,120 --> 00:06:43,070
Encore une fois, c'est une configuration supplémentaire que nous n'avions pas besoin de faire dans le monde de l'expo bien sûr.

89
00:06:44,400 --> 00:06:49,180
Sur iOS, vous devez également faire quelque chose de similaire pendant la reconstruction. Là, si vous allez

90
00:06:49,200 --> 00:06:57,100
dans votre fichier RNWithoutExpo, vous trouverez les informations. fichier plist et dans ce fichier,

91
00:06:57,490 --> 00:07:02,630
vous devez également ajouter une entrée pour demander cette autorisation.

92
00:07:07,760 --> 00:07:14,660
Vous devez ajouter une nouvelle clé ici après une paire clé-valeur existante, la position exacte n'a pas d'importance

93
00:07:14,670 --> 00:07:19,920
et vous trouverez les instructions détaillées sur les documents officiels de ce paquet, sous

94
00:07:19,920 --> 00:07:25,710
le document installé, si vous cliquez là, vous Je trouverai des instructions concernant les autorisations

95
00:07:25,710 --> 00:07:27,100
à définir pour

96
00:07:27,150 --> 00:07:32,240
Android, j'en ai également oublié une, nous devons également définir cette autorisation de

97
00:07:32,250 --> 00:07:38,380
stockage externe, alors laissez-moi revenir au manifeste Android, ajoutez-la ici et réexécutez-la sur Android et iOS

98
00:07:38,410 --> 00:07:43,970
, vous devez définir ces clés ici. Vous copiez donc tout

99
00:07:47,020 --> 00:07:53,410
cela, puis revenez à l'info. fichier plist que je vous ai montré ici et maintenant vous pouvez ajouter ces paires clé-valeur ici.

100
00:07:57,460 --> 00:07:58,210
Avec

101
00:07:58,750 --> 00:08:01,750
cela, vérifions l'application sur Android et si je clique maintenant

102
00:08:01,930 --> 00:08:05,860
sur prendre une photo, maintenant on me demande la permission ici, cela se

103
00:08:05,860 --> 00:08:08,730
produit maintenant automatiquement, le package le fait pour nous

104
00:08:08,920 --> 00:08:12,120
et maintenant, la caméra s'ouvre. Donc, cela fonctionne maintenant,

105
00:08:12,130 --> 00:08:17,350
mais comme vous l'avez vu avec un peu de configuration supplémentaire et en suivant les instructions sur

106
00:08:17,350 --> 00:08:23,260
les documents officiels et chaque paquet aura ses propres instructions. Certains packages ne prennent même pas en charge la

107
00:08:23,260 --> 00:08:23,830
commande

108
00:08:23,860 --> 00:08:25,530
link, vous devez en faire

109
00:08:25,560 --> 00:08:31,380
encore plus, d'autres packages nécessitent moins de travail. Vous avez plus de flexibilité mais donc aussi plus de devoirs.

110
00:08:31,390 --> 00:08:37,240
Cependant, c'est ainsi que vous pouvez apporter des packages tiers qui exploitent les fonctionnalités de l'appareil natif à une application React Native uniquement pour

111
00:08:37,240 --> 00:08:40,970
le code de votre composant que vous écrivez, c'est le même code que nous avons

112
00:08:41,020 --> 00:08:43,630
écrit tout au long du cours - mêmes composants,

113
00:08:43,630 --> 00:08:49,660
même logique, même manière de la façon dont vous créez votre application. Vous pouvez créer les mêmes dossiers, vous pouvez ajouter

114
00:08:49,660 --> 00:08:52,540
la navigation React, que tout ne change pas.