Download as PDF, PPTX
Uploaded byKobkrit Viriyayudhakorn
[React Native Tutorial] Lecture 5: Input and State
This document provides instructions and code snippets for building mobile apps with React Native. It discusses building a BMI calculator app and stopwatch app to demonstrate React Native features. Key points covered include initializing projects, building the user interface, adding styles, handling user input, using state to update the UI, and separating components. Methods like setState() and binding are explained. The full source code is provided for reference. Exercises are suggested to extend the apps further.
More Related Content
![[Lecture 3] AI and Deep Learning: Logistic Regression (Coding)](https://cdn.slidesharecdn.com/ss_thumbnails/lecture3empty-180216132805-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
![[Lecture 4] AI and Deep Learning: Neural Network (Theory)](https://cdn.slidesharecdn.com/ss_thumbnails/lecture4ink-180216131712-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
![[Lecture 2] AI and Deep Learning: Logistic Regression (Theory)](https://cdn.slidesharecdn.com/ss_thumbnails/lecture2-ink-180216131533-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
[React Native Tutorial] Lecture 5: Input and State
- 1. Kobkrit Viriyayudhakorn, Ph.D. CEOof iApp Technology Limited. kobkrit@gmail.com http://www.kobkrit.com
- 2. All source code •https://github.com/kobkrit/react-native-class-2017
- 3.
- 4. Making BMI CalculatorApp 1. Draw UI on Paper 2. Initial project using react- native 1. $|> react-native init bmi 3. Making UI 4. Making Styles 5. Adding User Input Handling 6. Compute and Output Draft on Paper
- 5. Making UI 1. Createcontainer that fill whole screen 2. Set the flexDirection of container to ‘column’ and its justifyContent: ‘center’ 3. Start Adding Elements 1. Text 2. TextInput 3. TouchableOpacity Draft on Paper
- 7. Using view togroup each items.
- 9. Keyboard Types (Cross-Platform) <TextInputkeyboardType=‘default’> default numeric email-address phone-pad iOS (9.3)
- 10. Keyboard Types (Cross-Platform) <TextInputkeyboardType=‘default’> default numeric email-address phone-padAndroid (6.0)
- 11. More Keyboard Types(iOS only) <TextInput keyboardType=‘default’> ascii-capable numbers-punctuation number-pad url
- 12. More Keyboard Types(iOS only) <TextInput keyboardType=‘default’> name-phone-pad twitter web-search decimal-pad
- 13. More TextInput Attribute <TextInput keyboardType=‘email-address’ autoCaptialize=‘none’ autoCorrect={false} maxLength={30} multiline={false} placeholder=‘Pleaseinsert e-mail’ returnKeyType=‘next’ /> https://facebook.github.io/react-native/docs/textinput.html
- 14. Cmd-K to Open/HideKeyboard
- 15.
- 16. iOS -> Cmd-Kto Open/Hide Keyboard
- 17. Add User InputFeedback
- 18. Enable JS Debugger Cmd- D (iOS) Menu Button (Android)
- 19. State • State isa JavaScript Object that we use to track and response to users’ inputs. • Each React component has its own instance of state. • Most important thing about state: • Any change in state will cause all components or any children components inside of it to be re- rendered.
- 20. State’s Rule ofThumb • When using state in component, always set the initialize state to the reasonable values. • Always use this.setState(changedObjects)instead of this.state.changedObject = someValue • If not using this.setState(), React something will not acknowledge the changes. Components will not be re-rendered. • Some strange behavior will happen in the app.
- 21. Initialize State • Wefirst defined 3 variables in state at the class’s constructor • weight (String) = ‘0’ - It is a string because we use it with TextInput. • height (String) = ‘0’ - It is a string because we use it with TextInput. • and calculated bmi (Number) = 0
- 22. Showing/Setting State in TextInput •value attribute - setting the text according to the state.weight’s value • onChangeText attribute - invoked when user making change the TextInput, apply the new input value into the state.
- 23. See State inAction • To see state working in action, Print the state value in render() • Run the application. • Typing some number into Weight (KG) and then Typing some number into Height (CM) and see the difference.
- 24. At start, Weight(KG) = 0, according to the weight state’s value. Console in React Native Debugger will print the state’s content, only when the text in Weight(KG) is changed, because the state make the component re-render.
- 25.
- 26.
- 27. Method Binding • Refreshthe app now, input some number, and push compute button. You will see the red screen. • It is because compute() method is not the standard method in the component class (We added it by our own). • The scope of compute() method is not yet visible to the class’s state.
- 28. Method Binding • Youcan bind the scope, by using bind() statement. • The best place to bind the method is at the class constructor.
- 29.
- 30.
- 31.
- 32.
- 34. Exercise 1 • Showingthe obesity level under the BMI number. • BMI > 32 = Obese • 25 < BMI < 32 = Over Weight • 18.5 < BMI < 25 = Normal Weight • BMI < 18.5 = Under Weight
- 36. Making Stopwatch App! 1.Draw UI on Paper 2. Initial project using react- native 1. $|> react-native init stopwatch 3. Making UI 4. Adding Style 5. Adding Logic
- 40.
- 41.
- 42. Handle Start ButtonPressed
- 43. Minutes-Second- Milliseconds Time Format •Press Start Button • TimeElapsed in milliseconds is displayed. • We need to format TimeElapsed to 00:00.00 format, We have a library for that. • Go to terminal at the working directory • >|$ npm install minutes- seconds-milliseconds --save
- 44.
- 45. UI Separation • Weneed to make the Stop button first. (Only start is showing now) • It is a good idea to seperate the start/stop button UI from the main render method, since the main render method is very long (hard to read, and hard to maintenance) Add startButton, stopButton style
- 46.
- 47. Don’t forget themethod binding
- 48.
- 49.
- 50. Making Lap FunctionWorks! • Every time when user press the lap button, record the current timeElapsed into this.state.lap and reset the startTime • Make the lower half of the app’s screen showing the list of timeElapsed in this.state.lap array.
- 51.
- 52. Lap Button UISeparation render method
- 53. Display the LapArray
- 55. See the difference Withthe UI separation Without
- 56.
- 57.
- 58.
- 59.
- 60. Home Work • Howto reset the laps? • It is leaved as the homework for you. • See the iOS 9’s stopwatch app for idea.