ソースを参照

Add example layout: FlatList (#4092)

Lists are a crucial component to almost every single app out there. This example contains a flatlist inside a bottomTab layout with a sidemenu too (basically as complicated as a screen would get).
Alberto Blanco 6 年 前
コミット
429519200c

+ 606
- 0
playground/src/assets/FakeListData.json ファイルの表示

@@ -0,0 +1,606 @@
1
+{
2
+  "_comment": "This is fake data completely generated.",
3
+	"data": [
4
+    {
5
+      "id": 1,
6
+      "first_name": "Hamnet",
7
+      "last_name": "Macbane",
8
+      "email": "hmacbane0@cloudflare.com",
9
+      "gender": "Male"
10
+    }, {
11
+      "id": 2,
12
+      "first_name": "Booth",
13
+      "last_name": "Ravenscroft",
14
+      "email": "bravenscroft1@tumblr.com",
15
+      "gender": "Male"
16
+    }, {
17
+      "id": 3,
18
+      "first_name": "Nathalie",
19
+      "last_name": "Grimbleby",
20
+      "email": "ngrimbleby2@baidu.com",
21
+      "gender": "Female"
22
+    }, {
23
+      "id": 4,
24
+      "first_name": "Alane",
25
+      "last_name": "Batte",
26
+      "email": "abatte3@pen.io",
27
+      "gender": "Female"
28
+    }, {
29
+      "id": 5,
30
+      "first_name": "Walsh",
31
+      "last_name": "Guage",
32
+      "email": "wguage4@clickbank.net",
33
+      "gender": "Male"
34
+    }, {
35
+      "id": 6,
36
+      "first_name": "Diannne",
37
+      "last_name": "Tompsett",
38
+      "email": "dtompsett5@cbsnews.com",
39
+      "gender": "Female"
40
+    }, {
41
+      "id": 7,
42
+      "first_name": "Rozella",
43
+      "last_name": "Mathis",
44
+      "email": "rmathis6@imgur.com",
45
+      "gender": "Female"
46
+    }, {
47
+      "id": 8,
48
+      "first_name": "Percy",
49
+      "last_name": "Pickrill",
50
+      "email": "ppickrill7@ihg.com",
51
+      "gender": "Male"
52
+    }, {
53
+      "id": 9,
54
+      "first_name": "Sancho",
55
+      "last_name": "Downie",
56
+      "email": "sdownie8@furl.net",
57
+      "gender": "Male"
58
+    }, {
59
+      "id": 10,
60
+      "first_name": "Ynes",
61
+      "last_name": "Whiffin",
62
+      "email": "ywhiffin9@google.com",
63
+      "gender": "Female"
64
+    }, {
65
+      "id": 11,
66
+      "first_name": "Trev",
67
+      "last_name": "Wreiford",
68
+      "email": "twreiforda@vkontakte.ru",
69
+      "gender": "Male"
70
+    }, {
71
+      "id": 12,
72
+      "first_name": "Laney",
73
+      "last_name": "Salvatore",
74
+      "email": "lsalvatoreb@tmall.com",
75
+      "gender": "Male"
76
+    }, {
77
+      "id": 13,
78
+      "first_name": "Morten",
79
+      "last_name": "Kalinovich",
80
+      "email": "mkalinovichc@sina.com.cn",
81
+      "gender": "Male"
82
+    }, {
83
+      "id": 14,
84
+      "first_name": "Johnath",
85
+      "last_name": "Drinkall",
86
+      "email": "jdrinkalld@usatoday.com",
87
+      "gender": "Female"
88
+    }, {
89
+      "id": 15,
90
+      "first_name": "Granthem",
91
+      "last_name": "Harry",
92
+      "email": "gharrye@blogtalkradio.com",
93
+      "gender": "Male"
94
+    }, {
95
+      "id": 16,
96
+      "first_name": "Bebe",
97
+      "last_name": "Tull",
98
+      "email": "btullf@prnewswire.com",
99
+      "gender": "Female"
100
+    }, {
101
+      "id": 17,
102
+      "first_name": "Sharleen",
103
+      "last_name": "Fernihough",
104
+      "email": "sfernihoughg@pinterest.com",
105
+      "gender": "Female"
106
+    }, {
107
+      "id": 18,
108
+      "first_name": "Lorelle",
109
+      "last_name": "Semken",
110
+      "email": "lsemkenh@chron.com",
111
+      "gender": "Female"
112
+    }, {
113
+      "id": 19,
114
+      "first_name": "Tiphanie",
115
+      "last_name": "Redgrove",
116
+      "email": "tredgrovei@blogs.com",
117
+      "gender": "Female"
118
+    }, {
119
+      "id": 20,
120
+      "first_name": "Salome",
121
+      "last_name": "Camier",
122
+      "email": "scamierj@storify.com",
123
+      "gender": "Female"
124
+    }, {
125
+      "id": 21,
126
+      "first_name": "Inigo",
127
+      "last_name": "De Beneditti",
128
+      "email": "idebenedittik@ucoz.com",
129
+      "gender": "Male"
130
+    }, {
131
+      "id": 22,
132
+      "first_name": "Riva",
133
+      "last_name": "Picardo",
134
+      "email": "rpicardol@homestead.com",
135
+      "gender": "Female"
136
+    }, {
137
+      "id": 23,
138
+      "first_name": "Kahaleel",
139
+      "last_name": "Klug",
140
+      "email": "kklugm@51.la",
141
+      "gender": "Male"
142
+    }, {
143
+      "id": 24,
144
+      "first_name": "Patty",
145
+      "last_name": "Veryard",
146
+      "email": "pveryardn@gmpg.org",
147
+      "gender": "Male"
148
+    }, {
149
+      "id": 25,
150
+      "first_name": "Augustine",
151
+      "last_name": "Pattemore",
152
+      "email": "apattemoreo@artisteer.com",
153
+      "gender": "Male"
154
+    }, {
155
+      "id": 26,
156
+      "first_name": "Obadiah",
157
+      "last_name": "Moreinis",
158
+      "email": "omoreinisp@arstechnica.com",
159
+      "gender": "Male"
160
+    }, {
161
+      "id": 27,
162
+      "first_name": "Janie",
163
+      "last_name": "Grimstead",
164
+      "email": "jgrimsteadq@google.com",
165
+      "gender": "Female"
166
+    }, {
167
+      "id": 28,
168
+      "first_name": "Reynold",
169
+      "last_name": "Whitbread",
170
+      "email": "rwhitbreadr@eepurl.com",
171
+      "gender": "Male"
172
+    }, {
173
+      "id": 29,
174
+      "first_name": "Cassandre",
175
+      "last_name": "Crowden",
176
+      "email": "ccrowdens@google.de",
177
+      "gender": "Female"
178
+    }, {
179
+      "id": 30,
180
+      "first_name": "Jesse",
181
+      "last_name": "Mabon",
182
+      "email": "jmabont@over-blog.com",
183
+      "gender": "Male"
184
+    }, {
185
+      "id": 31,
186
+      "first_name": "Galvan",
187
+      "last_name": "De Banke",
188
+      "email": "gdebankeu@time.com",
189
+      "gender": "Male"
190
+    }, {
191
+      "id": 32,
192
+      "first_name": "Stavro",
193
+      "last_name": "Meaney",
194
+      "email": "smeaneyv@tinypic.com",
195
+      "gender": "Male"
196
+    }, {
197
+      "id": 33,
198
+      "first_name": "Nixie",
199
+      "last_name": "Tinghill",
200
+      "email": "ntinghillw@nbcnews.com",
201
+      "gender": "Female"
202
+    }, {
203
+      "id": 34,
204
+      "first_name": "Ronald",
205
+      "last_name": "Farrall",
206
+      "email": "rfarrallx@census.gov",
207
+      "gender": "Male"
208
+    }, {
209
+      "id": 35,
210
+      "first_name": "Findley",
211
+      "last_name": "Baudains",
212
+      "email": "fbaudainsy@wix.com",
213
+      "gender": "Male"
214
+    }, {
215
+      "id": 36,
216
+      "first_name": "Cathyleen",
217
+      "last_name": "Backen",
218
+      "email": "cbackenz@mozilla.org",
219
+      "gender": "Female"
220
+    }, {
221
+      "id": 37,
222
+      "first_name": "Ingrim",
223
+      "last_name": "Sandiford",
224
+      "email": "isandiford10@mapquest.com",
225
+      "gender": "Male"
226
+    }, {
227
+      "id": 38,
228
+      "first_name": "Everard",
229
+      "last_name": "De Blasiis",
230
+      "email": "edeblasiis11@oaic.gov.au",
231
+      "gender": "Male"
232
+    }, {
233
+      "id": 39,
234
+      "first_name": "Kennith",
235
+      "last_name": "Gilliard",
236
+      "email": "kgilliard12@bloglines.com",
237
+      "gender": "Male"
238
+    }, {
239
+      "id": 40,
240
+      "first_name": "Ryley",
241
+      "last_name": "Tours",
242
+      "email": "rtours13@youtube.com",
243
+      "gender": "Male"
244
+    }, {
245
+      "id": 41,
246
+      "first_name": "Tillie",
247
+      "last_name": "Jacmar",
248
+      "email": "tjacmar14@upenn.edu",
249
+      "gender": "Female"
250
+    }, {
251
+      "id": 42,
252
+      "first_name": "Kele",
253
+      "last_name": "Marchetti",
254
+      "email": "kmarchetti15@forbes.com",
255
+      "gender": "Male"
256
+    }, {
257
+      "id": 43,
258
+      "first_name": "Ainslie",
259
+      "last_name": "Emtage",
260
+      "email": "aemtage16@youtu.be",
261
+      "gender": "Female"
262
+    }, {
263
+      "id": 44,
264
+      "first_name": "Irving",
265
+      "last_name": "Skyrme",
266
+      "email": "iskyrme17@printfriendly.com",
267
+      "gender": "Male"
268
+    }, {
269
+      "id": 45,
270
+      "first_name": "Carma",
271
+      "last_name": "Guinan",
272
+      "email": "cguinan18@prlog.org",
273
+      "gender": "Female"
274
+    }, {
275
+      "id": 46,
276
+      "first_name": "Aurel",
277
+      "last_name": "Keady",
278
+      "email": "akeady19@bizjournals.com",
279
+      "gender": "Female"
280
+    }, {
281
+      "id": 47,
282
+      "first_name": "Obediah",
283
+      "last_name": "Peete",
284
+      "email": "opeete1a@jalbum.net",
285
+      "gender": "Male"
286
+    }, {
287
+      "id": 48,
288
+      "first_name": "Debbi",
289
+      "last_name": "Mc Gorley",
290
+      "email": "dmcgorley1b@dyndns.org",
291
+      "gender": "Female"
292
+    }, {
293
+      "id": 49,
294
+      "first_name": "Jennifer",
295
+      "last_name": "Boase",
296
+      "email": "jboase1c@toplist.cz",
297
+      "gender": "Female"
298
+    }, {
299
+      "id": 50,
300
+      "first_name": "Addie",
301
+      "last_name": "Garnson",
302
+      "email": "agarnson1d@house.gov",
303
+      "gender": "Male"
304
+    }, {
305
+      "id": 51,
306
+      "first_name": "Cara",
307
+      "last_name": "Mustin",
308
+      "email": "cmustin1e@google.com.br",
309
+      "gender": "Female"
310
+    }, {
311
+      "id": 52,
312
+      "first_name": "Michel",
313
+      "last_name": "Danslow",
314
+      "email": "mdanslow1f@nyu.edu",
315
+      "gender": "Male"
316
+    }, {
317
+      "id": 53,
318
+      "first_name": "Cart",
319
+      "last_name": "Innis",
320
+      "email": "cinnis1g@edublogs.org",
321
+      "gender": "Male"
322
+    }, {
323
+      "id": 54,
324
+      "first_name": "Ashli",
325
+      "last_name": "Ast",
326
+      "email": "aast1h@disqus.com",
327
+      "gender": "Female"
328
+    }, {
329
+      "id": 55,
330
+      "first_name": "Reginald",
331
+      "last_name": "Tubble",
332
+      "email": "rtubble1i@canalblog.com",
333
+      "gender": "Male"
334
+    }, {
335
+      "id": 56,
336
+      "first_name": "Kamila",
337
+      "last_name": "Rylatt",
338
+      "email": "krylatt1j@upenn.edu",
339
+      "gender": "Female"
340
+    }, {
341
+      "id": 57,
342
+      "first_name": "Janice",
343
+      "last_name": "Burtt",
344
+      "email": "jburtt1k@wordpress.com",
345
+      "gender": "Female"
346
+    }, {
347
+      "id": 58,
348
+      "first_name": "Augustina",
349
+      "last_name": "Lampel",
350
+      "email": "alampel1l@cyberchimps.com",
351
+      "gender": "Female"
352
+    }, {
353
+      "id": 59,
354
+      "first_name": "Chrysa",
355
+      "last_name": "Draxford",
356
+      "email": "cdraxford1m@alexa.com",
357
+      "gender": "Female"
358
+    }, {
359
+      "id": 60,
360
+      "first_name": "Patin",
361
+      "last_name": "Mathey",
362
+      "email": "pmathey1n@scientificamerican.com",
363
+      "gender": "Male"
364
+    }, {
365
+      "id": 61,
366
+      "first_name": "Bianca",
367
+      "last_name": "Filimore",
368
+      "email": "bfilimore1o@about.me",
369
+      "gender": "Female"
370
+    }, {
371
+      "id": 62,
372
+      "first_name": "Nickolaus",
373
+      "last_name": "Swarbrigg",
374
+      "email": "nswarbrigg1p@g.co",
375
+      "gender": "Male"
376
+    }, {
377
+      "id": 63,
378
+      "first_name": "Callida",
379
+      "last_name": "Skone",
380
+      "email": "cskone1q@canalblog.com",
381
+      "gender": "Female"
382
+    }, {
383
+      "id": 64,
384
+      "first_name": "Zaneta",
385
+      "last_name": "Hanscome",
386
+      "email": "zhanscome1r@earthlink.net",
387
+      "gender": "Female"
388
+    }, {
389
+      "id": 65,
390
+      "first_name": "Gail",
391
+      "last_name": "Noblett",
392
+      "email": "gnoblett1s@cbslocal.com",
393
+      "gender": "Male"
394
+    }, {
395
+      "id": 66,
396
+      "first_name": "Anneliese",
397
+      "last_name": "Holbie",
398
+      "email": "aholbie1t@typepad.com",
399
+      "gender": "Female"
400
+    }, {
401
+      "id": 67,
402
+      "first_name": "Winny",
403
+      "last_name": "Challicombe",
404
+      "email": "wchallicombe1u@tamu.edu",
405
+      "gender": "Male"
406
+    }, {
407
+      "id": 68,
408
+      "first_name": "Ada",
409
+      "last_name": "Constantine",
410
+      "email": "aconstantine1v@goo.ne.jp",
411
+      "gender": "Female"
412
+    }, {
413
+      "id": 69,
414
+      "first_name": "Faber",
415
+      "last_name": "Elgar",
416
+      "email": "felgar1w@edublogs.org",
417
+      "gender": "Male"
418
+    }, {
419
+      "id": 70,
420
+      "first_name": "Tiebold",
421
+      "last_name": "Salla",
422
+      "email": "tsalla1x@barnesandnoble.com",
423
+      "gender": "Male"
424
+    }, {
425
+      "id": 71,
426
+      "first_name": "Mirabella",
427
+      "last_name": "Pummery",
428
+      "email": "mpummery1y@cmu.edu",
429
+      "gender": "Female"
430
+    }, {
431
+      "id": 72,
432
+      "first_name": "Mayor",
433
+      "last_name": "Ayliff",
434
+      "email": "mayliff1z@feedburner.com",
435
+      "gender": "Male"
436
+    }, {
437
+      "id": 73,
438
+      "first_name": "Isiahi",
439
+      "last_name": "Rives",
440
+      "email": "irives20@deviantart.com",
441
+      "gender": "Male"
442
+    }, {
443
+      "id": 74,
444
+      "first_name": "Mariya",
445
+      "last_name": "Scardifeild",
446
+      "email": "mscardifeild21@fastcompany.com",
447
+      "gender": "Female"
448
+    }, {
449
+      "id": 75,
450
+      "first_name": "Cort",
451
+      "last_name": "Placido",
452
+      "email": "cplacido22@behance.net",
453
+      "gender": "Male"
454
+    }, {
455
+      "id": 76,
456
+      "first_name": "Bobbye",
457
+      "last_name": "Inglish",
458
+      "email": "binglish23@reddit.com",
459
+      "gender": "Female"
460
+    }, {
461
+      "id": 77,
462
+      "first_name": "Erroll",
463
+      "last_name": "Lescop",
464
+      "email": "elescop24@gmpg.org",
465
+      "gender": "Male"
466
+    }, {
467
+      "id": 78,
468
+      "first_name": "Nathalia",
469
+      "last_name": "Casewell",
470
+      "email": "ncasewell25@craigslist.org",
471
+      "gender": "Female"
472
+    }, {
473
+      "id": 79,
474
+      "first_name": "Lynsey",
475
+      "last_name": "Lakey",
476
+      "email": "llakey26@yellowbook.com",
477
+      "gender": "Female"
478
+    }, {
479
+      "id": 80,
480
+      "first_name": "Ricardo",
481
+      "last_name": "Keenan",
482
+      "email": "rkeenan27@time.com",
483
+      "gender": "Male"
484
+    }, {
485
+      "id": 81,
486
+      "first_name": "Vidovik",
487
+      "last_name": "Klimentov",
488
+      "email": "vklimentov28@skyrock.com",
489
+      "gender": "Male"
490
+    }, {
491
+      "id": 82,
492
+      "first_name": "Moreen",
493
+      "last_name": "Stammers",
494
+      "email": "mstammers29@networksolutions.com",
495
+      "gender": "Female"
496
+    }, {
497
+      "id": 83,
498
+      "first_name": "Fenelia",
499
+      "last_name": "Churches",
500
+      "email": "fchurches2a@zdnet.com",
501
+      "gender": "Female"
502
+    }, {
503
+      "id": 84,
504
+      "first_name": "Dolly",
505
+      "last_name": "Guiducci",
506
+      "email": "dguiducci2b@cnet.com",
507
+      "gender": "Female"
508
+    }, {
509
+      "id": 85,
510
+      "first_name": "Aretha",
511
+      "last_name": "Grotty",
512
+      "email": "agrotty2c@quantcast.com",
513
+      "gender": "Female"
514
+    }, {
515
+      "id": 86,
516
+      "first_name": "Koral",
517
+      "last_name": "Wyldbore",
518
+      "email": "kwyldbore2d@eepurl.com",
519
+      "gender": "Female"
520
+    }, {
521
+      "id": 87,
522
+      "first_name": "Bernetta",
523
+      "last_name": "Bayliss",
524
+      "email": "bbayliss2e@rediff.com",
525
+      "gender": "Female"
526
+    }, {
527
+      "id": 88,
528
+      "first_name": "Brew",
529
+      "last_name": "Bromige",
530
+      "email": "bbromige2f@webnode.com",
531
+      "gender": "Male"
532
+    }, {
533
+      "id": 89,
534
+      "first_name": "Elfie",
535
+      "last_name": "Beeton",
536
+      "email": "ebeeton2g@1688.com",
537
+      "gender": "Female"
538
+    }, {
539
+      "id": 90,
540
+      "first_name": "Micheline",
541
+      "last_name": "O'Scollain",
542
+      "email": "moscollain2h@yolasite.com",
543
+      "gender": "Female"
544
+    }, {
545
+      "id": 91,
546
+      "first_name": "Madalyn",
547
+      "last_name": "Zanettini",
548
+      "email": "mzanettini2i@youtube.com",
549
+      "gender": "Female"
550
+    }, {
551
+      "id": 92,
552
+      "first_name": "Babbette",
553
+      "last_name": "Hause",
554
+      "email": "bhause2j@vk.com",
555
+      "gender": "Female"
556
+    }, {
557
+      "id": 93,
558
+      "first_name": "Arlette",
559
+      "last_name": "Maybury",
560
+      "email": "amaybury2k@cocolog-nifty.com",
561
+      "gender": "Female"
562
+    }, {
563
+      "id": 94,
564
+      "first_name": "Twyla",
565
+      "last_name": "Yerlett",
566
+      "email": "tyerlett2l@unicef.org",
567
+      "gender": "Female"
568
+    }, {
569
+      "id": 95,
570
+      "first_name": "Dania",
571
+      "last_name": "Warren",
572
+      "email": "dwarren2m@histats.com",
573
+      "gender": "Female"
574
+    }, {
575
+      "id": 96,
576
+      "first_name": "Andrey",
577
+      "last_name": "Peet",
578
+      "email": "apeet2n@bizjournals.com",
579
+      "gender": "Male"
580
+    }, {
581
+      "id": 97,
582
+      "first_name": "Tyson",
583
+      "last_name": "Ledekker",
584
+      "email": "tledekker2o@histats.com",
585
+      "gender": "Male"
586
+    }, {
587
+      "id": 98,
588
+      "first_name": "Lynnell",
589
+      "last_name": "Senner",
590
+      "email": "lsenner2p@wunderground.com",
591
+      "gender": "Female"
592
+    }, {
593
+      "id": 99,
594
+      "first_name": "Ky",
595
+      "last_name": "Gealle",
596
+      "email": "kgealle2q@huffingtonpost.com",
597
+      "gender": "Male"
598
+    }, {
599
+      "id": 100,
600
+      "first_name": "Lillian",
601
+      "last_name": "Berndt",
602
+      "email": "lberndt2r@qq.com",
603
+      "gender": "Female"
604
+    }
605
+  ]
606
+}

+ 30
- 0
playground/src/screens/ComplexLayout.js ファイルの表示

@@ -115,6 +115,36 @@ class ComplexLayout extends Component {
115 115
                   }
116 116
                 }
117 117
               }
118
+            },
119
+            {
120
+              sideMenu: {
121
+                left: {
122
+                  component: {
123
+                    name: 'navigation.playground.SideMenuScreen',
124
+                    passProps: {
125
+                      side: 'left'
126
+                    }
127
+                  }
128
+                },
129
+                center: {
130
+                  stack: {
131
+                    children: [
132
+                      {
133
+                        component: {
134
+                          name: 'navigation.playground.FlatListScreen',
135
+                        }
136
+                      }
137
+                    ]
138
+                  }
139
+                },
140
+                options: {
141
+                  bottomTab: {
142
+                    text: 'FlatList',
143
+                    icon: require('../images/three.png'),
144
+                    testID: testIDs.THIRD_TAB_BAR_BUTTON,
145
+                  }
146
+                }
147
+              }
118 148
             }
119 149
            ]
120 150
         }

+ 129
- 0
playground/src/screens/FlatListScreen.js ファイルの表示

@@ -0,0 +1,129 @@
1
+const React = require('react');
2
+const { Component } = require('react');
3
+const { SafeAreaView, FlatList, View, Text } = require('react-native');
4
+const { Navigation } = require('react-native-navigation');
5
+const testIDs = require('../testIDs');
6
+
7
+const FakeListData = require('../assets/FakeListData');
8
+
9
+class FlatListScreen extends Component {
10
+  static options(passProps) {
11
+    return {
12
+      topBar: {
13
+        title: {
14
+          text: 'FlatList with fake data',
15
+        },
16
+        searchBar: true, // iOS 11+ native UISearchBar inside topBar
17
+        searchBarHiddenWhenScrolling: true,
18
+        searchBarPlaceholder: 'Search', // iOS 11+ SearchBar placeholder
19
+        largeTitle: {
20
+          visible: true,
21
+          fontSize: 30,
22
+          color: 'white',
23
+          fontFamily: 'Helvetica',
24
+        },
25
+        leftButtons: [
26
+          {
27
+            id: 'sideMenu',
28
+            color: 'red',
29
+            icon: require('../images/two.png'),
30
+          }
31
+        ],
32
+        rightButtons: [
33
+          {
34
+            id: 'toggle',
35
+            color: 'red',
36
+            icon: require('../images/one.png'),
37
+          },
38
+        ],
39
+      },
40
+    };
41
+  }
42
+
43
+  constructor(props) {
44
+    super(props);
45
+    Navigation.events().bindComponent(this);
46
+    this.state = { isFetching: false, shouldHideOnScroll: false };
47
+  }
48
+
49
+  navigationButtonPressed({ buttonId }) {
50
+    switch (buttonId) {
51
+
52
+      case 'sideMenu':
53
+        Navigation.mergeOptions(this.props.componentId, {
54
+          sideMenu: {
55
+            left: {
56
+              visible: true,
57
+            },
58
+          },
59
+        });
60
+        break;
61
+
62
+      case 'toggle':
63
+        const { shouldHideOnScroll } = this.state;
64
+        Navigation.mergeOptions(this.props.componentId, {
65
+          topBar: {
66
+            hideOnScroll: !shouldHideOnScroll,
67
+            drawBehind: !shouldHideOnScroll,
68
+          }
69
+        });
70
+        this.setState({
71
+          shouldHideOnScroll: !shouldHideOnScroll
72
+        });
73
+        alert(`hideOnScroll/drawBehind is now ${!shouldHideOnScroll}`);
74
+        break;
75
+
76
+      default:
77
+        break;
78
+
79
+    }
80
+  }
81
+
82
+  onRefresh = () => {
83
+    this.setState({ isFetching: true }, () => {
84
+      setTimeout(() => {
85
+        this.setState({ isFetching: false });
86
+      }, 2000);
87
+    });
88
+  }
89
+
90
+  seperatorComponent = () => <View style={styles.seperatorComponent} />;
91
+
92
+  keyExtractor = item => item.id;
93
+
94
+  renderItem = ({ item }) => (
95
+    <View style={styles.listItem}>
96
+      <Text>{item.first_name} {item.last_name}</Text>
97
+      <Text>{item.email}</Text>
98
+    </View>
99
+  )
100
+
101
+  render() {
102
+    return (
103
+      <SafeAreaView style={styles.root}>
104
+        <FlatList
105
+          data={FakeListData.data}
106
+          keyExtractor={this.keyExtractor}
107
+          onRefresh={this.onRefresh}
108
+          ItemSeparatorComponent={this.seperatorComponent}
109
+          refreshing={this.state.isFetching}
110
+          renderItem={this.renderItem}
111
+        />
112
+      </SafeAreaView>
113
+    );
114
+  }
115
+}
116
+module.exports = FlatListScreen;
117
+const styles = {
118
+  root: {
119
+    flex: 1,
120
+    backgroundColor: 'whitesmoke'
121
+  },
122
+  listItem: {
123
+    height: 50,
124
+  },
125
+  seperatorComponent: {
126
+    height: 5,
127
+    backgroundColor: 'black',
128
+  }
129
+};

+ 2
- 0
playground/src/screens/index.js ファイルの表示

@@ -26,6 +26,7 @@ const ComplexLayout = require('./ComplexLayout');
26 26
 const SearchScreen = require('./SearchScreen');
27 27
 const KeyboardScreen = require('./KeyboardScreen');
28 28
 const BottomTabSideMenuScreen = require('./complexlayouts/BottomTabSideMenuScreen');
29
+const FlatListScreen = require('./FlatListScreen');
29 30
 
30 31
 function registerScreens() {
31 32
   Navigation.registerComponent(`navigation.playground.CustomTransitionDestination`, () => CustomTransitionDestination);
@@ -55,6 +56,7 @@ function registerScreens() {
55 56
   Navigation.registerComponent('navigation.playground.SearchControllerScreen', () => SearchScreen);
56 57
   Navigation.registerComponent('navigation.playground.KeyboardScreen', () => KeyboardScreen);
57 58
   Navigation.registerComponent('complexLayout.bottomTabThatOpensSideMenu', () => BottomTabSideMenuScreen);
59
+  Navigation.registerComponent('navigation.playground.FlatListScreen', () => FlatListScreen);
58 60
 }
59 61
 
60 62
 module.exports = {

+ 1
- 0
playground/src/testIDs.js ファイルの表示

@@ -55,6 +55,7 @@ module.exports = {
55 55
   SHOW_BOTTOM_TABS_BUTTON: `SHOW_BOTTOM_TABS_BUTTON`,
56 56
   FIRST_TAB_BAR_BUTTON: `FIRST_TAB_BAR_BUTTON`,
57 57
   SECOND_TAB_BAR_BUTTON: `SECOND_TAB_BAR_BUTTON`,
58
+  THIRD_TAB_BAR_BUTTON: `THIRD_TAB_BAR_BUTTON`,
58 59
   SHOW_OVERLAY_BUTTON: `SHOW_OVERLAY_BUTTON`,
59 60
   SHOW_TOUCH_THROUGH_OVERLAY_BUTTON: `SHOW_TOUCH_THROUGH_OVERLAY_BUTTON`,
60 61
   OK_BUTTON: `OK_BUTTON`,