imkopkap

เขียน App สลับสีพื้นหลังด้วย React Native (Android)

ใช้เวลา 20 นาที 28/02/2016

ในบทความนี้จะออกแนว Tutorial ในการเขียน Application Android ด้วย React Native สำหรับท่านที่ยังไม่เคยอ่านเรื่องเกี่ยวกับ React Native แนะนำให้ดู ติดตั้ง React-Native สร้างแอพ Android (windows)

 

และใน Tutorial นี้ เราจะมาทำ Application แบบพื้นฐานนั่น คือการเปลี่ยนสีพื้นหลังโดยใช้ปุ่ม Switch จะพาทำกันแบบ Step by Step เลยนะครับ

 

จำเป็น

 

ลงมือลุย

1. ให้เราสร้างโปรเจค: ชื่อว่า ColorSwitch และให้เข้าไปที่โฟลเดอร์ testSwict และลอง run ขึ้นมาครับ

$ react-native init ColorSwitch
$ cd ColorSwitch
$ react-native run-android

เมื่อเรา run ได้แล้วจะเกิด Error แบบนี้ครับ

 

Screenshot_2016-02-22-20-54-21

 

ซึ่งหมายความว่า เรายังไม่ได้ทำการ start server ให้ Application ของเราครับ ให้เพิ่มตามข้างล่างนี้ใน shell ของเรา

$ adb reverse tcp:8081 tcp:8081
$ react-native start

 

 

12717231_673237766151329_1794115651030036267_n
เรียบร้อยสำหรับการสร้างโปรเจค

 

2. เปิดไฟล์ index.android.js (สำหรับ Android)
เราจะทำการสร้าง App โดยใช้ปุ่ม Switch เป็นการกำหนดสีของพื้นหลัง โดยมีเงื่อนไขว่า ถ้าปุ่มเปิดให้แสดงสีส้ม ปุ่มปิดให้แสดงสีน้ำเงิน

ฉะนั้นในโปรเจคเรา เราจะใช้ Switch เราก็เพิ่มปุ่มนี้ครับไปใน import

index.android.js

  • import React, {
  •    AppRegistry,
  •    Component,
  •    StyleSheet,
  •    Text,
  •    View,
  •    Switch
  • } from ‘react-native’;>

3. สร้าง Constructor
ในโปรเจคนี้เราจะใช้ Javascript ES6 ในการทำงานกันนะครับ โดยเราจำเป็นต้องสร้าง Constructor และส่งค่าผ่าน super เพื่อบอก Component ของ React ว่านี่คือ Component ที่เราสร้าง (ชื่อ class คือ Component ที่เราสร้าง)

จากนั้นกำหนด state ไปว่าให้ switch มีค่าเป็น false และ color เป็นสีฟ้าเข้ม จะได้ดังข้างล่าง

...
class testSwitch extends Component {
  constructor(props) {
    super(props);

    this.state = {
      switch: false
    }
  }
...

4. แก้ไข StyleSheet

เลื่อนลงมาข้างล่าง ลบโค้ดของ Styles ออกให้หมดเปลี่ยนเป็นโค้ดข้างล่างนี้แทน

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  containerSky: {
    backgroundColor: '#34495e'
  },
  containerOrange: {
    backgroundColor: '#e74c3c'
  }
});

อธิบาย: ตอนนี้เรามีอยู่ 3 class CSS ชื่อว่า container (ปรับตำแหน่งของ Switch) , containerBlue, ContainerSky (2ตัวหลัง ไว้เปลี่ยนสี)
5. เขียนโค้ดการแสดงผล Render

...
render() {
    var classStyle = this.state.switch ? styles.containerOrange :  styles.containerSky;

    return (
      <View style={[styles.container, classStyle]}>
        <Switch
          onValueChange={(value) => this.setState({ switch: value })}
          value={this.state.switch}/>
      </View>
    );
  }
...

อธิบาย: var classStyle เป็นตัวกำหนดว่า switch เป็น true หรือ false ถ้าเป็นจริงให้มันเรียก class CSS ที่ชื่อว่า containerSky ถ้าเป็น false ให้เรียก containerBlue ส่วนข้างใน return จะเป็นการแสดงผลของ Component ในหน้าจอมือถือ

 

<View>

ถ้าพูดถึงภาษาเว็บก็จะเหมือน <div>

 

<Switch>

คือปุ่ม switch โดยกำหนด 2 attributes คือ onValueChange เจ้า onValueChange จะทำงานเมื่อมีการกดปุ่มให้ส่งค่า value เข้าไป จากนั้นให้ไป เปลี่ยน state ที่ชื่อว่า switch เป็นค่าใหม่คือค่า value  ส่วน Attributes อีกตัวคือ Value จะทำหน้าที่แสดงค่าของ state ที่ชื่อว่า switch

 

จากนั้นกดปุ่ม Reload JS จะได้แบบรูปภาพครับ

Screenshot_2016-02-22-21-51-01

บันทึกแนะนำ