Scribd
Upload
18 views16 pages

Button

The document discusses a React Native session about buttons. It covers creating a button component, adding a button to generate random numbers, displaying the numbers in a list, and deleting numbers from the list. It includes code examples for the different components and functions used.

Uploaded by

dinhquoctien.2015
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
18 views16 pages

Button

The document discusses a React Native session about buttons. It covers creating a button component, adding a button to generate random numbers, displaying the numbers in a list, and deleting numbers from the list. It includes code examples for the different components and functions used.

Uploaded by

dinhquoctien.2015
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 16

06.

Button
Sungchul Lee
Agenda
Button

In this session, we learn about 1 Button


Button

Add Num 2 Create Numlist.js with TouchableOpacity

3 App.js with functions

4 Q&A

Remove Selected item


Add Num

Button
Button
➢A basic button component that should
render nicely on any platform. Supports
a minimal level of customization.
– https://reactnative.dev/docs/button
Generator.js
➢Create new file
– Generate number
on screen
➢Create <Button>
– title: button display name
➢Props
– Add function from parent
Remove Selected item

Numer List
Numlist.js
➢Create new file
– Display new numbers
– Delete numbers
➢TouchableOpacity
– Touch event
➢Props
– Delete(idx)
• Pass value to Parent
Map()
➢The map() method creates a new array with the results of
calling a function for every array element.
➢The map() method calls the provided function once for
each element in an array, in order.
➢Note: map() does not execute the function for array
elements without values.
➢Note: this method does not change the original array.
– https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/
Global_Objects/Array/map
Array.prototype.map()
➢https://developer.mozilla.org/ko/docs
/Web/JavaScript/Reference/Global_
Objects/Array/map
delete()
➢Props
– Pass Function
– Come from Parent (App.js)
– Pass value index that is selected by onPress
App.js
App.js
➢Import components
– generator and numlist
➢State
– random array
• Hold numbers
➢onAddRandomNum
– Math.floor()
• rounds a number
– Math.random()
App.js - function https://developer.mozilla.org/ko/docs/Web/J
avaScript/Reference/Global_Objects/Array/fi
➢onNumDelete(position) lter
– Get argument from numlist
• Position: onPressed item
➢Filter()
– The filter() method creates an array filled with all array
elements that pass a test (provided as a function).
App.js - Return
➢Pass function
– Generator and NumList components
➢Pass value
– NumList
➢Three Components
➢StyleSheet
Result

Add Num

Remove Sele
cted item
Q&A

You might also like