วิธีสร้าง App Share รูปภาพ ด้วย React Native บน Expo

วิธีการสร้าง App Share รูปภาพ

วิธีสร้าง App Share รูปภาพ เป็นวิธีการทำงาน ด้วย React Native ที่เขียนขึ้นมาร่วมกับระบบ Expo ครอบเอาไว้ ทำให้สามารถทำงาน ได้อย่างง่ายดาย รวดเร็ว และสะดวกมากๆ

** ข้อควรรู้เบื้องต้นก่อนอ่าน
– เนื้อหาของบทความนี้ ไม่เหมาะกับ ผู้ที่ไม่เคยเขียน React Native มาก่อนเลย
– เนื้อหาของบทความนี้ เป็นเพียงพื้นฐานของการเรียนรู้ การทำงานกับ Expo Library สำหรับ แบ่งปันรูปภาพ ตามตัวอย่างใน Web คู่มือของ Expo เท่านั้น

React Native เป็น JavaScript ที่เราสามารถ สร้าง Application บนมือถือได้แบบ Cross Platform คือทำงานได้ทั้งบน iOS และ Android โดยการทำงานจากพื้นฐาน ความรู้ของภาษา JavaScript นั้นเอง

การสร้าง Application สำหรับเอาไว้ เลือกรูปภาพ และทำการ Share ผ่านทาง Application อื่นๆ เกิดจากการ เรียนรู้ และทำความเข้าใจ เรื่องของ Expo เบื้องต้น และได้ลองทำเป็นตัวอย่าง ไว้ให้สำหรับ ผู้ที่สนใจ ศึกษาการทำงานของ Expo ได้ทดลองทำ ซึ่งจะทำให้ มีความเข้าใจ ในการทำงานของ Expo ร่วมกันกับ ข้อมูลบนมือถือ อย่างเช่น รูปภาพ และการขอสิทธิ์ Permission ในการเข้าถึงต่างๆ

ซึ่ง Application นี้มี Code อยู่ใน คู่มือของตัวเว็บไซต์ Expo.io เองอยู่แล้ว แต่จะมา ย่อย ให้เข้าใจเป็น ภาษาไทย สำหรับคนที่ต้องการเพิ่มเติม เท่านั้นเองครับ

วิธีสร้าง App Share รูปภาพ บน Expo

Expo.io

มาเริ่มต้น เตรียม Project กันก่อนเลย

เราจะ Run ตัว project ของเราได้อย่างไร อันนี้ ง่ายมากเลยครับ เราสามารถทำงานกับ Code ของเราได้บน Android Emulator ต่างๆ เช่น Android studio แล้วสร้างตัว Virtual Device ออกมาก็ได้ ซึ่งหน้าตาจะออกมา ประมาณนี้เลย

Android Emulator

อารมณ์ จะเหมือนๆกับว่า เราได้โทรศัพท์ Android ขึ้นมาใช้งานใหม่ บน PC อีกเครื่องเลย แต่ถ้าใคร ไม่อยากจะพื้นที่ของเครื่อง ไปอีกราวๆ 10GB เพราะเจ้านี่ ผมก็แนะนำเป็น EXPO Client ซึ่งจะติดตั้งลงบน Smart Phone ของเรา ซึ่งลงติดตั้ง ได้ทั้ง Android และ iOS เลยครับ ทำให้เรา สามารถเรียก App ของเราที่สร้างบน Expo ขึ้นมาดูได้อย่างง่ายดาย

Expo On Google Play Store

คุณสามารถ เข้าไป Download กันได้ที่นี่เลย
https://play.google.com/store/apps/details?id=host.exp.exponent

ตัว Project นี้เราต้องเตรียมหลักๆคือ ตัว Expo SDK 37 ซึ่งอันที่จริง Version อื่นๆก็น่าจะทำงานได้ ไม่แตกต่างกัน แต่พอดีในเครื่องของผม ตอนที่เขียนนี่ จะเป็น SDK 37 เลยขอเขียน อธิบายไว้ให้เข้าใจตรงกันก่อนนะครับ

คำสั่งต่างๆที่ใช้ สามารถเข้าไปดู ได้ที่ Expo.io ทั้งหมด แต่คำสั่งแรกของเราที่จะทำงานบน Command line ก็คือ

expo init picking37

โดย Code บรรทัดด้านบน คือการสร้างตัว Project ขึ้นมา โดยใช้ชื่อ Project ว่า picking37 ซึ่งจะเป็น App ที่เราใช้เขียน Code กันต่อนั้นเอง

หลังจากที่เรา ได้สร้าง Project แล้ว เราจะทำการ ติดตั้ง Library ของ Expo เองเพิ่มเติม อีก 2 ตัว ซึ่งทาง Expo เตรียมเอาไว้ให้เรา ใช้งานได้อยู่แล้ว แต่ต้องติดตั้งเพิ่ม ซึ่งนั้นก็คือ Image Picking สำหรับใช้งานรูปภาพ และ Sharing สำหรับ Share ไปยัง Application อื่นๆ นั้นเอง

วิธีการติดตั้ง

expo install expo-image-picker
expo install expo-sharing

เพียงเท่านี้ เราก็พร้อม มาลุย วิธีสร้าง App Share รูปภาพ กันต่อแล้ว มาดูหน้าตาของไฟล์ package.json กันหน่อย ว่า มันควรจะออกมาเป็นแบบไหนครับ

package.json

ในส่วนของ File App.js เราจะเริ่มต้นใหม่กันตั้งแต่ บรรทัดแรกเลย โดยจะทำการเรียก Library ของ React และ React-Native ขึ้นมาทั้งหมดที่เราต้องการนำไปใช้

import React from "react";
import { Image, StyleSheet, Text, TouchableOpacity, View } from "react-native";

จากนั้นก็จะ ตามมาด้วย Library ของ Expo ที่เราติดตั้ง เสริมเพิ่มลงไป อีก 2 ตัว

import * as ImagePicker from "expo-image-picker";
import * as Sharing from "expo-sharing";

จากนั้น ในส่วนของ คือ function ที่เราจะทำการ Export ออกไป ก็คือ App() เราจะเอา ใส่ลงไปในส่วนนี้ เพื่อเตรียม Export ออกไปแสดงที่หน้า App ของเรากัน

export default function App() {
  return (
        <View style={styles.container}>
            <Text style={styles.title}>Picking Photo</Text>
            <Text>Application On Expo SDK37</Text>
        </View>
  );
}

ในส่วนนี้ เราได้เตรียมข้อความเอาไว้ 2 บรรทัด ก็คือ ข้อความที่อยู่ใน <Text> นั้นเอง ส่วนใน style นั้นผมแค่กำหนดชื่อเอาไว้ แล้วเราจะมา กำหนดค่า CSS เพิ่มกัน

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  title: {
    fontSize: 20,
    fontWeight: "bold",
  },
});

ทีนี้ เราจะมาลอง Run หน้าตาของ App เราดูกันหน่อย ว่าออกมา หน้าตาเป็นยังไงบ้าง โดยจะเข้าไป Run ด้วยคำสั่ง

npm start

ระบบจะพาเราวิ่งไปที่ Browser ของ Expo เพื่อที่จะเห็น Console ทั้งหมด แบบนี้

Expo Developer Tool

หลังจากแสดงหน้านี้ ให้ทำการคลิกเลือกที่ Run on Android Emulator สำหรับคนใช้ Android หรือถ้าคนใช้ mac ก็สามารถ Run on iOS simulator ได้ แล้วที่Device ของเราก็จะได้ หน้าตาแบบนี้ ออกมา

วิธีสร้าง App Share รูปภาพ
First Screen

ทีนี้ เราก็จะทำการเรียกใช้ state ของ react ออกมาก่อน โดยตั้งชื่อว่า selectedImage

const [selectedImage, setSelectedImage] = React.useState(null);

จากนั้น เราก็จะไปกำหนด function ให้เกิดการทำงานขึ้น เมื่อมีการกด button บนหน้า screen กันด้วย code ชุดนี้

// start function
let openImagePickerAsync = async () => {
    let permissionResult = await ImagePicker.requestCameraRollPermissionsAsync();

if (permissionResult.granted === false) {
      alert("Permission to access camera roll is required!");
      return;
 }

 let pickerResult = await ImagePicker.launchImageLibraryAsync();
 console.log(pickerResult);

 if (pickerResult.cancelled === true) {
    return;
  }
  
  setSelectedImage({ localUri: pickerResult.uri });

}; 
// end function

เราได้ทำการ สร้าง function ชื่อ openImagePickerAsync ขึ้นมา โดยให้มันมีความสามารถ ไปทำการ Request Permissions หรือการขอสิทธิ์ เข้าถึงรูปภาพภายในเครื่อง มานั้นเอง ด้วยคำสั่งจาก module ที่เรา import เข้ามาอย่าง ImagePicker นั้นก็คือ ImagePicker.requestCameraRollPermissionsAsync();

ซึ่งถ้าสามารถใช้สิทธิ์ได้ การ Return ค่ากลับมา จะมาอยู่ที่ ตัวแปร permissionResult ที่เราประกาศเอาไว้ ในค่าที่เป็น permissionResult.granted ซึ่งเราก็จะจับมา if เพื่อเช็คสิทธิ์กันก่อน ถ้าไม่ได้ เราก็จะ alert กลับไปบอก user ว่ามันจำเป็นนะ ให้สิทธิ์นี้กับเราซะ 5555

เมื่อเราได้สิทธิ์การเข้าถึง รูปภาพในเครื่องแล้ว เราก็จะทำการ ใช้งาน ImagePicker อีกครั้ง ด้วยการเรียก ImagePicker.launchImageLibraryAsync() เพื่อให้เราสามารถ ทำการ เลือกรูปภาพที่อยู่ในเครื่อง มาใช้งานได้นั้นเอง แต่หากมีการยกเลิกการเลือกรูปภาพไป เราก็จะ return กลับไปเฉยๆ ไม่ทำอะไร

แต่ถ้าเราเลือกรูปภาพได้แล้ว เราจะทำการ เก็บ uri หรือที่อยู่ของรูปภาพของเรา เอาไว้ที่ setSelectedImage ผ่านทางการ set state ด้วย pickerResult.uri เพื่อให้ state ของเราเก็บค่า uri เอาไว้

แค่นี้เราก็สามารถ เลือกรูปภาพกันได้แล้ว แต่ยังครับ เรายังไม่สามารถ แสดงรูปภาพของเราที่เลือกเอาไว้ มาโชว์ได้เลย งั้นเราจะต้อง ไปสร้าง component สำหรับ show รูปภาพ และปุ่มสำหรับกดต่างๆกันก่อน

// your image will show
  const ShowImage = (props) => {
    if (selectedImage !== null) {
      return (
        <View>
          <Image
            source={{ uri: selectedImage.localUri }}
            style={styles.thumbnail}
          />
          <TouchableOpacity onPress={openShareDialogAsync} style={styles.button}>
            <Text style={styles.buttonText}>Share this photo</Text>
          </TouchableOpacity>
        </View>
      );
    } else {
      return (
        <Image
          style={styles.logo}
          source={{
            uri: "https://teerapuch.com/uploads/morning-brew.jpg",
          }}
        />
      );
    }
  };

ตรงนี้จะยาวนิดนึงนะครับ เราได้ทำการสร้าง component ขึ้นมา 1 ตัวชื่อ ShowImage เพื่อที่จะเป็นพื้นที่สำหรับแสดงรูปภาพที่เลือกเอาไว้ โดยที่ ถ้ายังไม่เลือก เราจะแสดงภาพจาก uri ทั่วไปที่เราเลือกมาก่อน แต่ถ้าเลือกมาแล้ว เราจะวางไว้ที่ <image /> โดยการใส่ uri ระบุชี้ไปที่ selectedImage.localUri ที่เป็น state ของเรานั้นเอง โดยผมใส่ <TouchableOpacity> เอาไว้ด้วย ครอบตัวข้อความว่า Share this photo เพราะเดี๋ยวเราจะมาทำการ share กันต่อ ส่วน css มาดูตรงนี้ได้เลย

CSS Code
// your css
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  logo: {
    width: 100,
    height: 100,
    marginBottom: 50,
  },
  title: {
    fontSize: 20,
    fontWeight: "bold",
  },
  thumbnail: {
    width: 300,
    height: 300,
    resizeMode: "contain",
  },
  buttonText: {
    padding: 20,
    color: "#fff",
    marginTop: 20,
    marginBottom: 20,
    borderWidth: 1,
    borderRadius: 5,
    borderColor: "#258085",
    backgroundColor: "#258085",
  },
});

อันนี้เป็น CSS ทั้งหมดที่ทำไว้เลยจ๊าาา แล้วเราก็จะเพิ่ม ปุ่มไปที่หน้า Screen กันอีก 1 ปุ่มนะ

<TouchableOpacity 
  onPress={openImagePickerAsync} 
  style={styles.button}>
        <Text style={styles.buttonText}>Pick a photo</Text>
</TouchableOpacity>

แล้ววาง <ShowImage /> ไว้ส่วนบนต่อจาก <View> เพื่อแสดงรูปภาพ

ตอนนี้เราก็จะได้ หน้าตาของ app เป็นแบบนี้กันแล้ว

Second Screen
ก่อนเลือกรูปภาพ
หน้าตอนเลือกรูปภาพแล้ว
หน้าตอนเลือกรูปภาพแล้ว

ใกล้ความเป็นจริงแล้วนะ ทีนี้เราจะมาทำให้ ปุ่ม Share this photo ทำงานได้จริงกัน โดยเขียน Code เพิ่มนิดเดียวแบบนี้

let openShareDialogAsync = async () => {
    if (!(await Sharing.isAvailableAsync())) {
      alert(`The image is available for sharing at: ${selectedImage.remoteUri}`);
      return;
    }
    // Get Image Uri
    await Sharing.shareAsync(selectedImage.localUri);
  };

ซึ่งถ้ามีการคลิกปุ่ม share เราก็จะแสดง Dialog นี้ขึ้นมาเลย โดยทำการเรียกเอาความสามารถของ Sharing ออกมา ผ่านทาง shareAsync แล้วใส่ parameter ทีเ่ป็น selectedImage.localUri ของเราลง มันก็จะไปเรียก app อื่นๆขึ้นมาเลยครับ แค่นี้ก็จะจบงานแล้ว เราจะได้หน้าตาแบบนี้เลยครับ

วิธีสร้าง App Share รูปภาพ
Share Dialog

เท่านี้ก็จบแล้ว คุณสามารถ ดู Code ทั้งหมดของผมได้ที่นี่เลยครับ Github Repo

ขอบคุณ Code ต้นฉบับของทาง Expo ที่ Expo Image Picking

คุณอาจสนใจบทความนี้
จัดการให้หมดทุก Version ด้วย Node Version Manager

ธีรภัทร เกษสกุล เป็นคุณพ่อของน้องเกี้ยมอี๋ ที่ไม่รู้ว่าใครซนกว่ากัน ทำงานเป็นโปรแกรมเม่ามือหนึ่ง ประจำบ้าน ถนัดงาน Web Application ชอบงานขีดเขียนเป็นชีวิตจิตใจ ดูหนัง เล่นเกมส์กับลูกชาย เปิดร้านขายหมูสะเต๊ะ อาม่า บน Lineman, Grab food และ Food panda เป็นรายได้เสริมหาเลี้ยงเจ้าแสบ

Leave a Reply

Your email address will not be published. Required fields are marked *

Back To Top