0Pricing
React Academy · บทเรียน

การเข้าถึง API ของอุปกรณ์: กล้อง ตำแหน่ง และการแจ้งเตือนแบบพุช

ใช้โมดูล Expo SDK เพื่อขอสิทธิ์และเข้าถึงความสามารถดั้งเดิมของอุปกรณ์

การเข้าถึง API ของอุปกรณ์: กล้อง ตำแหน่ง และการแจ้งเตือนแบบพุช เป็นบทเรียน React Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน React Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส React Academy มีบทเรียนทั้งหมด 4 บทเรียน

โมดูล Expo SDK

Expo SDK มีส่วนติดต่อ JavaScript สำหรับความสามารถของอุปกรณ์แบบเนทีฟ ติดตั้งแพ็กเกจแต่ละรายการและขอสิทธิ์ก่อนเข้าถึงฮาร์ดแวร์

# Install what you need:
npx expo install expo-camera expo-location expo-notifications

การขอสิทธิ์

ขอสิทธิ์ก่อนเข้าถึงคุณสมบัติที่มีความละเอียดอ่อนของอุปกรณ์เสมอ ตรวจสอบผลลัพธ์ก่อนดำเนินการต่อ

import * as Location from 'expo-location';

async function getLocation() {
  const { status } = await Location.requestForegroundPermissionsAsync();
  if (status !== 'granted') {
    Alert.alert('Permission denied');
    return;
  }
  const location = await Location.getCurrentPositionAsync({});
  console.log(location.coords);
}

การเข้าถึงกล้อง

ใช้ expo-camera เพื่อแสดงตัวอย่างจากกล้องและถ่ายภาพ

import { CameraView, useCameraPermissions } from 'expo-camera';
import { useRef } from 'react';

export function CameraScreen() {
  const [permission, requestPermission] = useCameraPermissions();
  const cameraRef = useRef(null);

  if (!permission?.granted) {
    return <Button onPress={requestPermission} title="Grant camera" />;
  }

  const takePicture = async () => {
    const photo = await cameraRef.current?.takePictureAsync();
    console.log(photo?.uri);
  };

  return <CameraView ref={cameraRef} facing="back" />;
}

ตัวเลือกรูปภาพ

expo-image-picker ช่วยให้ผู้ใช้เลือกรูปภาพจากคลังรูปภาพได้โดยไม่ต้องแสดงส่วนติดต่อกล้อง

import * as ImagePicker from 'expo-image-picker';

async function pickImage() {
  const result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ImagePicker.MediaTypeOptions.Images,
    quality: 0.8,
    allowsEditing: true,
    aspect: [4, 3],
  });

  if (!result.canceled) {
    console.log(result.assets[0].uri);
  }
}

การติดตามตำแหน่ง

สมัครรับการอัปเดตตำแหน่งด้วย watchPositionAsync() สำหรับการติดตามแบบเรียลไทม์ ยกเลิกการสมัครรับเมื่อยกเลิกการเมานต์

useEffect(() => {
  let subscription;
  (async () => {
    const { status } = await Location.requestForegroundPermissionsAsync();
    if (status !== 'granted') return;
    subscription = await Location.watchPositionAsync(
      { accuracy: Location.Accuracy.High, distanceInterval: 10 },
      location => setCoords(location.coords)
    );
  })();
  return () => subscription?.remove();
}, []);

การแปลงที่อยู่เป็นพิกัดและการแปลงพิกัดเป็นที่อยู่

แปลงพิกัดเป็นที่อยู่ (การแปลงพิกัดย้อนกลับ) หรือแปลงที่อยู่เป็นพิกัด (การแปลงพิกัด) ด้วย expo-location

const [address] = await Location.reverseGeocodeAsync({ latitude: 37.78, longitude: -122.43 });
console.log(`${address.street}, ${address.city}, ${address.country}`);

การตั้งค่าการแจ้งเตือนแบบพุช

ใช้ expo-notifications เพื่อลงทะเบียนรับการแจ้งเตือนแบบพุชและรับโทเค็นพุชของ Expo

import * as Notifications from 'expo-notifications';

async function registerForPushNotifications() {
  const { status } = await Notifications.requestPermissionsAsync();
  if (status !== 'granted') return null;
  const token = (await Notifications.getExpoPushTokenAsync()).data;
  return token; // send this to your server
}

การจัดการการแจ้งเตือนขาเข้า

รับฟังการแจ้งเตือนเมื่อแอปอยู่เบื้องหน้าและรับฟังการแตะการแจ้งเตือน

useEffect(() => {
  const receivedSub = Notifications.addNotificationReceivedListener(notification => {
    console.log('Received:', notification);
  });
  const responseSub = Notifications.addNotificationResponseReceivedListener(response => {
    const data = response.notification.request.content.data;
    router.push(`/post/${data.postId}`);
  });
  return () => { receivedSub.remove(); responseSub.remove(); };
}, []);

การแจ้งเตือนภายในเครื่อง

กำหนดเวลาการแจ้งเตือนภายในเครื่อง (ไม่ต้องใช้เซิร์ฟเวอร์) ด้วย scheduleNotificationAsync

await Notifications.scheduleNotificationAsync({
  content: { title: 'Reminder', body: 'Check your app!', data: {} },
  trigger: { seconds: 60 }, // fires after 60 seconds
});

การติดตามตำแหน่งในเบื้องหลัง

สำหรับตำแหน่งในเบื้องหลัง ให้ใช้ expo-task-manager และ Location.startLocationUpdatesAsync โดยต้องมีสิทธิ์เพิ่มเติมใน app.json

ตรวจสอบความเข้าใจ

ก่อนเข้าถึงกล้องหรือตำแหน่งของอุปกรณ์ใน Expo คุณต้องทำอะไรเสมอ

สรุปทบทวน

ใช้โมดูล Expo SDK (expo-camera, expo-location, expo-notifications) เพื่อเข้าถึงอุปกรณ์ ขอสิทธิ์ก่อนเสมอ ตรวจสอบผลลัพธ์ และล้างการสมัครรับข้อมูลใน useEffect ลงทะเบียนรับการแจ้งเตือนแบบพุชและส่งโทเค็นพุชของ Expo ไปยังแบ็กเอนด์

คำถามที่พบบ่อย

บทเรียน “การเข้าถึง API ของอุปกรณ์: กล้อง ตำแหน่ง และการแจ้งเตือนแบบพุช” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การเข้าถึง API ของอุปกรณ์: กล้อง ตำแหน่ง และการแจ้งเตือนแบบพุช” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส React Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส React Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การเข้าถึง API ของอุปกรณ์: กล้อง ตำแหน่ง และการแจ้งเตือนแบบพุช”

ใช้โมดูล Expo SDK เพื่อขอสิทธิ์และเข้าถึงความสามารถดั้งเดิมของอุปกรณ์ คุณปฏิบัติ React Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน React Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน React Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “การเข้าถึง API ของอุปกรณ์: กล้อง ตำแหน่ง และการแจ้งเตือนแบบพุช” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน React Academy นี้ได้ไหม

ได้ บทเรียน React Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. คอมโพเนนต์หลักของ React Native เทียบกับ DOM บนเว็บ
  2. การตกแต่งด้วย StyleSheet API และ Flexbox
  3. การนำทางด้วย Expo Router
  4. การเข้าถึง API ของอุปกรณ์: กล้อง ตำแหน่ง และการแจ้งเตือนแบบพุช
← กลับไปที่ React Academy