Reactive-Native แอพสมุดบันทึกเบอร์โทรศัพท์

— จุดประสงค์ของแอพนี้ เพื่อที่จะบันทึกเบอร์โทรศัพท์และข้อมูลของแต่ละบุคคล

ก่อนอื่นเมื่อเราต้องการจะสร้าง React-Native จะต้องติดตั้ง Package ต่างๆดังนี้

• node.js
• yarn
• git

ผมขอไม่พูดถึงส่วนขั้นตอนการติดตั้งและการสร้าง React-Native เพราะสามารถค้นหาได้ด้วยตนเอง มาดูในส่วนของแอพกันดีกว่า

Source Code

App.js

import React, { Component } from 'react';
 
import { StyleSheet, Text, View, Alert, ScrollView, Platform, TouchableOpacity,TextInput,Button,ImageBackground  } from 'react-native';
 
export default class App extends Component<{}> {
  constructor() {
    super();
    this.tmpArray = [
      { name: "Parin",class: "0854158168", info:"CoE" },
      { name: "Boom", class: "0884506289", info:"CoE" },
      { name: "Hero", class: "0859935152", info:"FHT" },
      { name: "Mama", class: "0827297534", info:"CoE" },
      { name: "Tae", class: "0857980400", info:"FIS" },
      { name: "Top", class: "0635469599", info:"CoE" },
      { name: "Hammy", class: "0980929034", info:"FHT" },
      { name: "Earth", class: "0954205088", info:"FIS" },
      { name: "Job", class: "0954842489", info:"CoC" },
      { name: "Thu", class: "0724964825", info:"CoC" },
      { name: "Not", class: "0816482187", info:"FTE" },
      { name: "Best", class: "0927864242", info:"CoC" },
      { name: "Got", class: "0864124828", info:"FIS" },
    ];
  }
  showArrayItem = (item) => {
    Alert.alert(item);
  }
 
  render() {
    return (
 
      <View style={styles.MainContainer}> 
  <ImageBackground source={require('./bg.jpg')} style={{width: '100%', height: '100%'}}>
      <ScrollView>
          {
            this.tmpArray.map((item, key) => (
 <TouchableOpacity key={key} onPress={this.showArrayItem.bind(
   this, item.name+':'+item.class)}>
<Text style={styles.TextStyle} > Name : {item.name} </Text>
<Text style={styles.TextStyle} > Major : {item.info}</Text>
<View style={{ width: '100%', height: 3, backgroundColor: '#3B9C9C' }}/>
   </TouchableOpacity>
            ))
          }
        </ScrollView>
        </ImageBackground>
      </View>
    );
  }
}
 
const styles = StyleSheet.create({
  MainContainer: {
    flex: 1,
    margin: 2,
    paddingTop: (Platform.OS) === 'android' ? 20 : 0,
  },
 
  TextStyle: {
    fontSize: 25,
    color: '#5FFB17',
    textAlign: 'left',
    fontWeight:'bold'
  }
});

การทำงานเริ่มจากการเพิ่มข้อมูลใน Array ซึ่งในตอนนี้มีข้อมูล ชื่อ สาขา และเบอร์โทรศัพท์ในอานาคตอาจจะเพิ่มข้อมูลอื่นๆอีก เมื่อกรอกข้อมูลครบแล้วจะเข้ามาทำงานในส่วนของ ShowItem ที่มีคำสั่ง Alert อยู่ในที่นี้เมื่อผู้ใช้คลิ๊กในช่องข้อมูลของคนๆนั้น(ทำคำสั่ง TouchableOpacity) จะมีการเด้งแจ้งเตือนเป็นชื่อและเบอร์โทรศัพท์ของคนนั้นเพราะกำหนด Object เป็น Id name และ class ในส่วนล่างสุดจะเป็นการตั้งค่า style และ กำหนด Platform เป็นของ Android

ตัวอย่างการทำงาน

เริ่มต้น

คลิ๊กช่องที่ชื่อ Parin

เมื่อคลิ๊กจะมีการแจ้งเตือนข้อมูลเบอร์โทรศัพท์

ท้ายที่สุดนี้คิดว่ายังมีอีกหลายอย่างที่ยังสามารถพัฒนาได้ เช่น การเพิ่ม-ลบ ข้อมูลโดยที่สามารถเพิ่มข้อมูลจากหน้าแอพได้เลย หรือ การเพิ่มอย่างอื่นนอกจากเบอร์โทรศัพท์เป็นต้น หากบทความนี้เป็นประโยชน์แก่ผู้อ่านก็ขอขอบคุณครับ

Good Luck.