เข้าใจเรื่องของปุ่ม
สำหรับปุ่มกดใน RN นั้นมีอยู่ 3 แบบหลักๆคือ
Button
Button เป็นปุ่มที่จะแสดงแตกต่างกันไปตาม os ดังภาพด้านล่าง
ซ้าย Android,ขวา iOS
Button จะประกอบไปด้วย
- title=“Press Me” คือคำที่จะแสดงอยู่บนปุ่ม
- color=“#841584" คือการกำหมดสีพื้นหลังสำหรับ Android หรือ กำหนดสีตัวอักษรสำหรับ iOS
- onPress={onButtonPress} คือEvent เมื่อกดจะไปทำงานที่ function ใด
<Button onPress={onButtonPress} title=”Press Me” color=”#841584" />
สำหรับButton จะไม่สามารถแก้ไขการแสดงผลได้มากนัก ถ้าต้องการแก้ไขรูปแบบของปุ่มมากๆ จะแนะนำให้ไปใช้ TouchableOpacity หรือ TouchableHighlight แทน
TouchableHighlight
TouchableHighlight เป็นตัวที่ไว้ครอบเพื่อให้ view นั้นสามารถกดได้
โดยประกอบไปด้วย
- onPress={this.LoginCheck} คือEvent เมื่อกดจะไปทำงานที่ function ใด
<TouchableHighlight onPress={this.LoginCheck}>
<View style={styles.signin}>
<Text style={styles.whiteFont}>Sign In</Text>
</View>
</TouchableHighlight>
จากด้านบนจะเห็นว่า TouchableHighlight ตอนนี้ครอบ View กับ Text ไว้ จึงทำให้ View กับ Text เมื่อกดจะไปทำงานที่ function LoginCheck
TouchableOpacity
TouchableOpacity จะเหมือนกับTouchableHighlight จะแตกต่างกันตรงตอนแสดงผล คือ TouchableOpacity เวลากดปุ่มมันจะลด Opacity ของปุ่มลง ส่วน TouchableHighlight เวลากดปุ่มมันจะHighlight ขึ้นมา ดูตัวอย่างด้านล่างครับ
ปุ่มที่แสดงหน้าจอปกติ
เมื่อกดปุ่ม TouchableOpacity
เมื่อกดปุ่ม TouchableHighlight
เริ่มทำ
หลังจากเข้าใจเรื่องการทำงานของปุ่มต่างๆเบื้องต้นแล้ว ก็เอามันมาใช้กับหน้า login กันเถอะ
สำหรับก่อนหน้านี้หน้า login จะแสดงเป็นแถบสี พร้อมข้อความ Sign In ที่ไม่สามารถกดได้
<View style={styles.signin}>
<Text style={styles.whiteFont}>Sign In</Text>
</View>
ทีนี้เราจะสร้างFunction ก่อน โดยใช้ชื่อว่า LoginCheck โดยเมื่อกดปุ่มจะให้ย้อนกลับไปหน้าที่แล้ว สำหรับการย้อนกลับไปหน้าที่แล้วนั้นเราจะใช้ Actions.pop() ของ mobx
เริ่มต้น Import Actions จาก react-native-mobx
import { Actions } from ‘react-native-mobx’
หลังจากนั้นเพิ่ม function
LoginCheck() {
Actions.pop()
}
ต่อมาจะเอา TouchableHighlight มาครอบView และให้เรียกใช้function LoginCheck
โดยเริ่มจาก import TouchableHighlight จาก react-native
ต่อมานำ TouchableHighlight ครอบเลย…
<TouchableHighlight onPress={this.LoginCheck}>
<View style={styles.signin}>
<Text style={styles.whiteFont}>Sign In</Text>
</View>
</TouchableHighlight>
ตอนนี้ปุ่มก็จะสามารถกดได้แล้ว เมื่อกดก็จะย้อนกลับไปหน้าก่อนหน้า ต่อไปเราจะสร้าง Model ตามหลักของ MobX เพื่อให้เก็บค่าการLogin ไปแสดงในหน้าหลัก
Create Model
เริ่มต้นด้วยการสร้างโฟลเดอร์ ชื่อ model ภายในกล่อง app
ต่อมาสร้างไฟล์ชื่อ user.js ภายในโฟลเดอร์ที่สร้าง
เปิดไฟล์ user.js แล้ว import observable จาก mobx
import { observable } from ‘mobx’;
ต่อมาก็มาตั้งค่า observable ว่าเราจะเก็บค่าอะไรบ้าง
const userStore = observable({
username: ‘’,
password: ‘’,
name: ‘’,
image: ‘’,
});
ต่อมาก็สร้างfunction เพื่อเก็บค่า Username กับ Password ไปใช้ต่อ
userStore.SetData = function (user, pass) {
this.username=user
this.password=pass
}
ซึ่งfunction ชื่อ SetData รับค่า user, pass มาแล้วส่งให้กับ username และ password ที่เป็น observable
สุดท้าย exports module
module.exports = userStore;
Use Model
การนำmodelไปใช้ แนะนำว่าควรนำไปใช้ผ่าน Router จะใช้งานได้ง่ายกว่า
เริ่มด้วยเปิดไฟล์ NavigationMain.js แล้วทำการ import model
import Userstore from ‘../model/user’;
ต่อมาส่ง model ไปผ่าน Router ในชื่อ userstore ดังนั้น Scene ต่างๆสามารถเรียกใช้งานได้ผ่าน this.props.userstore
<Router userstore={Userstore} >
ต่อมาไปที่หน้า Login.js
ในfunction LoginCheck เราจะให้เก็บข้อมูล username และ password ไปเก็บในmodel ผ่านทาง this.props.userstore.SetData
- bind(this) ให้ function LoginCheck เพื่อให้สามารถเข้าถึง state กับ props ได้
this.LoginCheck = this.LoginCheck.bind(this)
- ในfunction LoginCheck เรียกใช้ SetData โดยส่งค่าstateของ username และ password ไป
this.props.userstore.SetData(this.state.username,this.state.password)
ต่อมาไปที่หน้า MainApp.js เพื่อแสดง Username ที่เป็น observable อยู่ในmodel
ภายใน render() เพิ่มcode เรียกค่าของUsername
โดยสร้าง User มารับค่าจาก this.props.userstore.username
สำหรับ เครื่องหมาย ? หมายถึง การตรวจสอบว่าค่าก่อนหน้ามีค่าหรือไม่ ถ้ามีจะแสดงค่า this.props.userstore.username และถ้าไม่มีจะแสดงค่าหลังเครื่องหมาย : คือค่า ว่างนั้นเอง
const User = this.props.userstore.username ? this.props.userstore.username :‘’
หลังจากนั้นนำ User ไปเรียกใช้ตอน Return
{User}
จะได้เป็น
จากนั้นทดลอง Run จะได้เป็นดังนี้