เพื่อแสดง Date และ Time picker ต้องติดตั้งแพ็กเกจ: npm install @react-native-community/datetimepicker --save ตัวอย่าง: DateTimePicker ใน React Native การนำเข้า import DateTimePicker from @react-native-community/datetimepicker; คอมโพเนนต์พื้นฐาน <DateTimePicker testID=dateTimePicker value=

Checkbox เป็นคอมโพเนนต์ทั่วไปที่ใช้บน UI บ่อย React Native core ไม่มี checkbox ต้องติดตั้งแพ็กเกจ การติดตั้ง npm install --save-dev react-native-paper คอมโพเนนต์พื้นฐาน <Checkbox status={checkboxStatus} onPress={onCheckboxCheckedFunc} /> คุณสมบัติสำคัญ Props คำอธิบาย

React Native มีคอมโพเนนต์ Animation ช่วยเพิ่มความโต้ตอบให้กับคอมโพเนนต์ต่างๆ เช่น View, Text, Image, ScrollView, FlatList, SectionList React Native มี animation 2 ประเภท: Animated API LayoutAnimation Animated API Animated API ให้ animation แบบ time-based ตาม input/output ตัวอย่างนี้จะเปลี่ย

เพื่อแสดง Chips ใน UI เราจะใช้ React Native Paper Material Design การติดตั้ง npm install --save-dev react-native-paper รูปแบบ Chip Component คอมโพเนนต์พื้นฐาน <Chip icon=icontodisplay onPress={onPressFunc}>Chip Name</Chip> คุณสมบัติสำคัญ Props คำอธิบาย

SectionList เป็นอินเตอร์เฟซสำหรับแสดงรายการแบบมีส่วน (sectioned list) คุณสมบัติสำคัญ: รองรับ Header/Footer ของรายการ รองรับ Header/Footer ของแต่ละ section Scroll Loading (โหลดข้อมูลขณะเลื่อน) Pull to refresh (ดึงเพื่อรีเฟรช) Cross-platform เต็มรูปแบบ คอมโพเนนต์พื้นฐาน <SectionList

เนื่องจากความนิยมของแอป iOS และ Android เพิ่มสูงขึ้น บริษัทจำนวนมากต้องการพัฒนาแอปอย่างรวดเร็ว การพัฒนาแอป Native แบบเต็มรูปแบบมีต้นทุนสูง ต้องมีทีมแยกสำหรับ iOS และ Android React Native เป็นโซลูชันที่ดี เพราะแอปที่พัฒนาด้วย React Native รันได้ทั้ง iOS และ Android React Native เป็นเฟรมเวิร์กพัฒนาแ

คอมโพเนนต์ Modal ช่วยแสดงมุมมองเนื้อหา (content view) เหนือ UI หลักของแอป คอมโพเนนต์พื้นฐาน { Alert.alert(Modal has been closed.); }} > Your Content Here </Modal> การนำเข้า import { Modal } from react-native; คุณสมบัติสำคัญของ Modal ลำดับ Props & คำอธิบาย

บนอุปกรณ์มือถือ การโต้ตอบกับ UI เกิดขึ้นผ่านการแตะ (tap) หรือสัมผัส (touch) เช่น กดปุ่ม, เลื่อนหน้าจอ, ซูม React Native มี event และคอมโพเนนต์ touchable สำหรับจัดการ gestures นี้ ตัวอย่างที่ 1: การจัดการ Tap บน Button { alert(You Tapped on Me!); }} title=Tap Me /> Event onPress จะถูกเ

คอมโพเนนต์ Alert ช่วยแสดงกล่องโต้ตอบ (dialog box) หรือป๊อปอัปให้ผู้ใช้ พร้อม tiêu đề ข้อความ และปุ่ม เพื่อยืนยันจากผู้ใช้ตามข้อความที่แสดง คอมโพเนนต์พื้นฐาน Alert.alert(yourTitle, yourMessage, [yourButtons], options) การนำเข้า import { Alert } from react-native; เพื่อแสดงป๊อปอัป ให้เรียก Alert.a

เพื่อโหลดข้อมูลจากเซิร์ฟเวอร์ สามารถใช้ Fetch API ซึ่งคล้ายกับ XMLHttpRequest หรือ API เครือข่ายอื่นๆ การใช้งาน Fetch API แบบง่าย console.log(responseJson)); โค้ดด้านบนดึงข้อมูล JSON จาก URL และพิมพ์ลงคอนโซล การเรียก fetch() พื้นฐานรับอาร์กิวเมนต์เดียวคือ path ที่ต้องการดึง และคืนค่า Promise พร้

หลังจากติดตั้ง React Native แล้ว คุณจะได้โค้ดเริ่มต้นใน App.js ดังนี้: import React from react; import { StyleSheet, Text, View } from react-native; export default class App extends React.Component { render() { return ( Open up App.js to start working on your app! Cha

Loading Indicator ใช้เมื่อต้องการบอกผู้ dùngว่าคำขอที่ทำบน UI จะใช้เวลาบ้าง เช่น เมื่อผู้ใช้กดปุ่มส่งฟอร์มหรือกดปุ่มค้นหาข้อมูล React Native มีคอมโพเนนต์ ActivityIndicator ที่ให้วิธีการแสดง loading indicator หลากหลายรูปแบบ คอมโพเนนต์พื้นฐาน <ActivityIndicator animating={animating} color=#bc2b7

ProgressBar ใช้แจ้งให้ผู้ใช้ทราบว่าเนื้อหาจะพร้อมใช้งานในไม่ช้า เหมาะสำหรับใช้เมื่อส่งข้อมูลไปยังเซิร์ฟเวอร์และรอการตอบกลับ การติดตั้ง ติดตั้งโมดูล react-native-paper ด้วย npm: npm install --save-dev react-native-paper คอมโพเนนต์พื้นฐาน <ProgressBar progress={progress_number} color=progresscol

คอมโพเนนต์ SafeAreaView ใช้สำหรับแสดงเนื้อหาภายในพื้นที่ปลอดภัยของอุปกรณ์ มันจัดการการเพิ่ม padding ให้อัตโนมัติ และรับรองว่าเนื้อหาจะไม่ถูกบังโดยแถบนำทาง (navigation bar), แถบเครื่องมือ (toolbar), แถบแท็บ (tab bars) และพื้นที่อื่นๆ ของระบบ คอมโพเนนต์นี้พร้อมใช้งานสำหรับอุปกรณ์ iOS ตัวอย่าง: การใช

เมธอด writable.cork() ใช้บังคับให้ข้อมูลที่เขียนทั้งหมดถูกเก็บไว้ในหน่วยความจำบัฟเฟอร์ ข้อมูลที่ถูกเก็บไว้นี้จะถูกนำออกจากบัฟเฟอร์ก็ต่อเมื่อมีการเรียก stream.uncork() หรือ stream.end() ไวยากรณ์ cork() writable.cork() uncork() writable.uncork() พารามิเตอร์ ไม่มีพารามิเตอร์เพิ่มเติม เนื่องจากเมธอดเ

คุณสมบัติ writable.writableLength ใช้แสดงจำนวนไบต์หรือออบเจ็กต์ที่อยู่ในคิวและพร้อมจะถูกเขียน คุณสมบัตินี้ช่วยตรวจสอบข้อมูลตามสถานะจาก highWaterMark ไวยากรณ์ writable.writableLength ตัวอย่างที่ 1: การใช้งาน writableLength กับ cork() สร้างไฟล์ชื่อ writableLength.js และคัดลอกโค้ดด้านล่าง: node writ

คุณสมบัติ writable.writableObjectMode ใช้สำหรับตรวจสอบคุณสมบัติ objectMode ของ Writable Stream ที่กำหนด คุณสมบัตินี้จะคืนค่า true หากตั้งค่า Object Mode ไว้ มิฉะนั้นจะคืนค่า false ไวยากรณ์ writable.writableObjectMode ตัวอย่างที่ 1: การใช้งาน Object Mode = true สร้างไฟล์ชื่อ writableObjectMode.js

React Native เป็นเฟรมเวิร์กมือถือ (Mobile framework) จาวาสคริปต์โอเพนซอร์สจาก Facebook ที่ออกแบบมาเฉพาะสำหรับสร้าง native mobile apps สำหรับ iOS และ Android React Native พัฒนาจากไลบรารี ReactJS JavaScript ที่ช่วยสร้าง user interface สำหรับแพลตฟอร์มมือถือ React Native สามารถนำไปใช้ภายในแอป iOS หรือ

คอมโพเนนท์หลัก (core components) สำคัญที่สุดใน React Native มีดังนี้: React Native ComponentAndroid Native ViewiOS Native ViewWeb Browserคำอธิบาย View - <View>บน Android จะกลายเป็น <ViewGroup>บน iOS จะกลายเป็น <UIView>บนเว็บจะกลายเป็น <div> tagคอนเทนเนอร์หลักรองรับ flexb

State คือที่มาของข้อมูล เราควรพยายามทำให้ state เรียบง่ายที่สุดและลดจำนวน stateful components ให้น้อยที่สุด หากมีคอมโพเนนท์ 10 ตัวที่ต้องการข้อมูลจาก state ควรสร้าง container component เดียวที่จะเก็บ state ให้ทั้งหมด ตัวอย่าง 1 เปลี่ยน title ปุ่มเป็น ON/OFF เมื่อผู้ใช้กดปุ่ม State เริ่มต้นใน const