การเข้าถึง 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 ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- คอมโพเนนต์หลักของ React Native เทียบกับ DOM บนเว็บ
- การตกแต่งด้วย StyleSheet API และ Flexbox
- การนำทางด้วย Expo Router
- การเข้าถึง API ของอุปกรณ์: กล้อง ตำแหน่ง และการแจ้งเตือนแบบพุช