789 งานเร่งกับ React Native (010)

ภาพ(http://home.transport.co.th)
ครั้งนี้ถึงเวลาแล้วสำหรับหน้าหลักของAppเรา ส่วนใหญ่ หน้าหลักมักทำเป็นแบบ Timeline หรือไว้แสดงเมนูและเนื้อหาหลัก

Intro

สำหรับหน้าหลักตอนนี้จะมีหน้าตาแบบนี้

เราจะทำการเปลี่ยนให้มีหน้าตามันดูน่าสนใจขึ้น ไปกันเลย….

Slideshow

หน้าแรกสำหรับเราก็น่าจะมีอะไรให้มันเคลื่อนไหวนิดนึงจะได้ไม่ดูนิ่งๆ ก็เลยเลือกการนำslideshow เข้ามาโดยอยากประหยัดเวลาเลยเลือก

react-native-swiper ของ leecade ซึ่งเป็น Swiper component ช่วยในการทำslideshow ของเรา

Install

เริ่มจาก เปิด Terminal หรือ Cmd.exe แล้วไปที่กล่องProject

หลังจากนั้นพิมพ์คำสั่ง Install react-native-swiper ได้เลย

npm i react-native-swiper --save

รอสักครู่ให้ Installเรียบร้อย

Use

ต่อมามาดูวิธีการนำ react-native-swiper มาใช้งานกัน โดยจะทำการแก้ไขส่วนหน้า MainApp(MainApp.js) โดยแบ่งเป็น 3 ขั้นตอนตามนี้

1. Import

เริ่มด้วยการ Import

import Swiper from ‘react-native-swiper’

2. Config

State

โดยเริ่มกำหมดข้อมูล image ใน state ดังนี้

imgList: [
 { id: 1, url: ‘http://home.transport.co.th/images/44/M1K.jpg' },
 { id: 2, url: ‘http://home.transport.co.th/images/44/bus2.jpg' },
 { id: 3, url: ‘http://home.transport.co.th/images/44/bus3.jpg' },
 { id: 4, url: ‘http://home.transport.co.th/images/44/bus4.jpg' },
 ],

Render

ในส่วน Return ของ Render ให้ทำการเพิ่ม tag Swiper ดังด้านล่าง

<Swiper style={styles.wrapper} height={120} loop={true} autoplay={true} autoplayTimeout={5.0}>
 {
 this.state.imgList.map((item, i) =>
 <View style={styles.slide} key={i}>
 <Image key={i} style={styles.image} source={{ uri: item.url }} />
 </View>
 )}
 </Swiper>

โดย Swiper มีการกำหนดค่าอยู่ 2 ส่วน คือ

1. ส่วนconfig Swiper ประกอบด้วย

  • height={120} คือขนาดความสูงของ slide
  • loop={true} เป็นการบอกว่า slide นี้จะเล่นวนได้
  • autoplay={true} คือให้เล่นอัตโนมัติ
  • autoplaytimeout={5.0} คือให้หน่วงเวลาแต่ละ slide เท่าไหร่

2. ส่วนที่แสดงผลในslide คือส่วนที่อยู่ภายใน tag Swiper โดยในที่นี้จะให้แสดงเป็นรูปภาพขนาดเต็ม

Style

สำหรับstyleที่ใช้กับ Swiper

slide: {
 flex: 1,
 justifyContent: ‘center’,
 backgroundColor: ‘transparent’
 },
 image: {
 width,
 flex: 1,
 backgroundColor: ‘transparent’
 },

3. Test

หลังจากทำครบแล้วทดลองrunดูจะได้ดังภาพ

Note

*สำหรับ iOS ถ้า URL รูปภาพ ไม่ใช่ localhost อย่าลืมไปเพิ่ม URL

โดยเปิดProject ด้วย Xcode

หลังจากนั้นเปิดไฟล์ Info.plist

แล้วไปที่ App Transport Security Settings > Exception Domains

แล้วทำการเพิ่ม Domain เข้าไป ให้เป็นแบบ localhost

หรือ ถ้ายังไม่แน่ใจเรื่อง Domain ในระหว่างdevelop สามารถเปิดใช้งานทุกdomain ได้ (อย่าลืมก่อนใช้งานจริง ต้องกลับไปทำแบบวิธีแรก เนื่องจากการเปิดทุกdomain มีความเสี่ยงเรื่องความปลอดภัย)

โดยสามารถทำได้ดังรูป

MainContent

หลังจากเราได้ทำ Slideshow กันไปแล้วต่อมาก็จะทำส่วนเนื้อหาหลักๆกันล่ะครับ โดยในหน้าหลักจะมีเนื้อหาและรูปแสดงอยู่ในหลายส่วน ไปทำกันเลย..

Import

เริ่มต้น import เพิ่มดังนี้

Image,ScrollView,Dimensions,Platform,TouchableOpacity จาก react-native
const { width } = Dimensions.get(‘window’)

ScrollView

ScrollView จะมีการใช้กันมากเพื่อให้เนื้อหาที่อยู่ภายในScrollViewนั้นสามารถแสดงผลได้เกิดกว่าขนาดหน้าจอมี โดยถ้าผู้ใช้ต้องการจะดูข้อมูลส่วนที่เหลือเพียงแค่Scrollขึ้นลง หรือซ้ายขวา เพื่อดู

โดยในหน้านี้มีการเอา ScrollView ครอบทุกส่วน

ปกติScrollView จะทำงานเป็นแนวตั้ง(Vertical) ซึ่งเราสามารถตั้งค่าเป็นแนวนอน(horizontal)ได้โดยกำหนด

horizontal={true}

Dynamic layout

ต่อมาเราจะมาดูส่วนของ dynamic layout คือหน้าตาที่ถูกกำหมดโดยข้อมูลที่มา

Setup Data

เริ่มต้นที่ state ทำการเพิ่มข้อมูล เพื่อมาทำ layout

ซึ่งมีรูปแบบการแสดงคือ แสดงข้อมูลรายการบริษัทรถทัวร์ 10 อันดับที่สามารถScrollได้ ต่อมาแสดงข้อมูล บริษัทรถทัวร์ สองรายการแยกตามภาค

โดยจำลองข้อมูล สองชุดดังนี้

ชุดที่หนึ่งเป็นข้อมูล หมวดหมู่และรายละเอียด

mainData: [
 {
 catID: ‘C1’, catName: ‘ภาคเหนือ’, item: [
 { itemID: ‘I1’, itemName: ‘นครทมแอร์’, img: ‘http://home.transport.co.th/images/44/bus3.jpg' },
 { itemID: ‘I2’, itemName: ‘สมบัติทัวร์’, img: ‘http://home.transport.co.th/images/44/bus4.jpg' },
 ]
 },
 {
 catID: ‘C1’, catName: ‘ภาคกลาง’, item: [
 { itemID: ‘I1’, itemName: ‘นครทมแอร์’, img: ‘http://home.transport.co.th/images/44/bus3.jpg' },
 { itemID: ‘I2’, itemName: ‘สมบัติทัวร์’, img: ‘http://home.transport.co.th/images/44/bus4.jpg' },
 ]
 },
 {
 catID: ‘C1’, catName: ‘ภาคใต้’, item: [
 { itemID: ‘I1’, itemName: ‘นครทมแอร์’, img: ‘http://home.transport.co.th/images/44/bus3.jpg' },
 { itemID: ‘I2’, itemName: ‘สมศักดิ์ทัวร์’, img: ‘http://home.transport.co.th/images/44/bus4.jpg' },
 ]
 },
 {
 catID: ‘C1’, catName: ‘ภาคอีสาน’, item: [
 { itemID: ‘I1’, itemName: ‘นครทมแอร์’, img: ‘http://home.transport.co.th/images/44/bus3.jpg' },
 { itemID: ‘I2’, itemName: ‘สมบัติทัวร์’, img: ‘http://home.transport.co.th/images/44/bus4.jpg' },
 ]
 },
 ]

ชุดที่สองเป็นข้องมูล topten

topData: [
 { itemID: ‘I1’, itemName: ‘นครทมแอร์’, img: ‘http://home.transport.co.th/images/44/bus3.jpg' },
 { itemID: ‘I2’, itemName: ‘สมบัติทัวร์’, img: ‘http://home.transport.co.th/images/44/bus4.jpg' },
 { itemID: ‘I3’, itemName: ‘AAA’, img: ‘http://home.transport.co.th/images/44/bus3.jpg' },
 { itemID: ‘I4’, itemName: ‘BBB’, img: ‘http://home.transport.co.th/images/44/bus4.jpg' },
 { itemID: ‘I5’, itemName: ‘CCC’, img: ‘http://home.transport.co.th/images/44/bus3.jpg' },
 { itemID: ‘I6’, itemName: ‘DDD’, img: ‘http://home.transport.co.th/images/44/bus4.jpg' },
 ]

Render

ส่วน render สามารถแบ่งได้เป็น 3 ส่วนย่อยๆคือ

1. สร้างส่วนหมวดหมู่และข้อมูล

ส่วนหมวดหมู่และข้อมูลจะ array ของ mainData มา map แล้วเก็บข้อมูลใส่ตัวแปร Box เป็นรูปแบบดังนี้

โดยจะเห็นว่ามีการ map array สองรอบ

รอบแรกดึงข้อมูลจาก mainData นำเอา catName,catID, item มาใช้ทำหมวดหมู่

รอบสองดึงข้อมูล item จาก mainData นำเอา itemID,img, itemName มาใช้ทำรายการในหมวดหมู่นั้น

และมีการใช้ TouchableOpacity สองจุดคือ

1.TouchableOpacity ที่เรียก _showmore ใช้ครอบส่วนที่แสดงส่วนอื่นๆ เมื่อกดคำว่าอื่นๆแล้วจะ

2.TouchableOpacity ที่เรียก _showitem ใช้ครอบส่วนแสดงผล บริษัททัวร์ เมื่อกดจะแสดงรายละเอียด

2. สร้างส่วน TopTen

ส่วนTopTenจะ array ของ topData มา map แล้วเก็บข้อมูลใส่ตัวแปร TopTenเป็นรูปแบบดังนี้

โดยมีการใช้ TouchableOpacity ครอบข้อมูลแสดงผลรูปและข้อความ เมื่อกดจะไปเรียก_showitem เพื่อแสดงรายละเอียด

3. Return

ส่วนreturn ก็จะนำเอา TopTen กับ ฺBoxมาแสดง ดังนี้

TopTen นี้จะสามารถ Scroll แนวนอนได้จึงได้นำ ScrollView มาครอบอีกชั้น

โดย ScrollView มีการกำหนด

  • horizontal={true} ให้scroll แนวนอน
  • showsHorizontalScrollIndicator={false} ไม่แสดงแทบscrollแนวนอน
  • showsVerticalScrollIndicator={false}ไม่แสดงแทบscrollแนวตั้ง

ผลที่ได้เมื่อแสดง TopTen

Box นี้จะนำมาแสดงผลได้โดยตรงเลย

{Box}

ผลที่ได้เมื่อแสดง {Box}

สำหรับส่วนreturnเต็มๆจะเป็นดังนี้

Functions

จากด้านบนจะเห็นว่ามีการเรียกใช้งาน function 2 ตัว

1. _showmore มีการรับค่า id มา โดยในfunction มีเพียงเรียกใช้console.log เพื่อนแสดง idที่รับเข้ามา

_showmore(id) {
 console.log(‘_showmore::’ + id)
 }

2. _showitem มีการรับค่า id มา โดยในfunction มีเพียงเรียกใช้console.log เพื่อนแสดง idที่รับเข้ามา

_showitem(id) {
 console.log(‘_showitem::’ + id)
 }

Styles ทั้งหมด

Run

หลังจากทำทั้งหมดแล้วก็ได้เวลามาลอง Runดูจะได้ผลตามนี้

แถมๆ

เพื่อทดสอบการทำ Dynamic จึงสร้างfunction ที่ทำการเปลี่ยนตำแหน่งข้อมูลarray ของTopTen ทุกๆ 2 วิ ลองมาดูผลกัน

ข้อมูลทั้งหมดเป็นข้อมูลสมมุติเพื่อใช้ในการทำบทความ ไม่ได้นำไปใช้เชิงพาณิชย์และขอขอบคุณภาพสวยๆจาก http://home.transport.co.th ครับ