Zenler Player
กำลังโหลดคอร์สเรียน กรุณารอสักครู่
React Native
กลับไปหน้าหลักสูตร
0% สมบรูณ์
0% สมบรูณ์
เกี่ยวกับ React และ React Native
ติดตั้ง Node.js, Visual Studio Code และ Extensions
ติดตั้ง expo-cli, สร้างและทดสอบแอพพลิเคชัน
แนวทางการทดสอบแอพพลิเคชัน
สร้างคอมโพเนนต์ (Component)
ทดลองแก้ไข App คอมโพเนนต์
สร้างส่วนติดต่อกับผู้ใช้ด้วย JSX
การแสดงค่าของตัวแปรใน JSX
ตัวอย่างการสร้างฟังก์ชันคอมโพเนนต์ชื่อ Comment
คุณสมบัติพื้นฐานของคอมโพเนนต์
วิธีผ่านค่า props ไปยัง Child คอมโพเนนต์
การผ่านค่า props หลายๆ ค่า
การรับค่า props.children มาใช้งาน
ประกาศตัวแปรเพื่อรับค่า props
กำหนดค่าเริ่มต้นให้กับ State
การใช้งาน useState ฮุกในฟังก์ชันคอมโพเนนต์
setState() เป็น asynchronous
ผ่านค่าฟังก์ชันไปกับ props
View คอมโพเนนต์และสร้างสไตล์
กำหนดหลายสไตล์ด้วยอาร์เรย์
หาขนาด กำหนดขนาดและหมุนหน้าจอ
ปรับแต่งสไตล์ตามอุปกรณ์ที่ใช้
สร้างคอมโพเนนต์สำหรับ Android
Flexbox ใน React Native
เรียงคอมโพเนนต์ในแนวคอลัมน์
การจัดเรียงในแกนหลัก (justifyContent)
การใช้งาน ScrollView คอมโพเนนต์
เลื่อนหน้าจอในแนวนอนด้วย ScrollView
การนำข้อมูลจากอาร์เรย์มาแสดงใน ScrollView
แสดงรายชื่อนักเรียนใน FlatList และลบรายการใน FlatList
ติดตั้ง React Navigation V6
ตัวอย่างการเปลี่ยนหน้าจอแบบง่ายๆ
การส่งข้อมูลไปยังรูทปลายทาง
วิธีผ่านค่ากลับไปยังรูทต้นทาง
ติดตั้ง Bottom Tab Navigator
TextInput คอมโพเนนต์
กำหนด state เก็บค่าอินพุต
Switch, Picker และ Modal คอมโพเนนต์ พร้อมการแสดงหน้าต่าง Alert
1. แนะนำ React Native
เกี่ยวกับ React และ React Native
ดูตัวอย่าง
ติดตั้ง Node.js, Visual Studio Code และ Extensions
ดูตัวอย่าง
ติดตั้ง expo-cli, สร้างและทดสอบแอพพลิเคชัน
2. ทดสอบแอพพลิเคชัน
แนวทางการทดสอบแอพพลิเคชัน
3. คอมโพเนนต์ และ JSX
สร้างคอมโพเนนต์ (Component)
ทดลองแก้ไข App คอมโพเนนต์
สร้างส่วนติดต่อกับผู้ใช้ด้วย JSX
การแสดงค่าของตัวแปรใน JSX
ตัวอย่างการสร้างฟังก์ชันคอมโพเนนต์ชื่อ Comment
4. props ใน React Native
คุณสมบัติพื้นฐานของคอมโพเนนต์
วิธีผ่านค่า props ไปยัง Child คอมโพเนนต์
การผ่านค่า props หลายๆ ค่า
การรับค่า props.children มาใช้งาน
ประกาศตัวแปรเพื่อรับค่า props
5. พื้นฐานการใช้งาน state
กำหนดค่าเริ่มต้นให้กับ State
การใช้งาน useState ฮุกในฟังก์ชันคอมโพเนนต์
setState() เป็น asynchronous
ผ่านค่าฟังก์ชันไปกับ props
6. Platform และการใช้สไตล์
View คอมโพเนนต์และสร้างสไตล์
กำหนดหลายสไตล์ด้วยอาร์เรย์
หาขนาด กำหนดขนาดและหมุนหน้าจอ
ปรับแต่งสไตล์ตามอุปกรณ์ที่ใช้
สร้างคอมโพเนนต์สำหรับ Android
7. Flexbox และการจัดเรียงคอมโพเนนต์
Flexbox ใน React Native
เรียงคอมโพเนนต์ในแนวคอลัมน์
การจัดเรียงในแกนหลัก (justifyContent)
8. ScrollView และ FlatList
การใช้งาน ScrollView คอมโพเนนต์
เลื่อนหน้าจอในแนวนอนด้วย ScrollView
การนำข้อมูลจากอาร์เรย์มาแสดงใน ScrollView
แสดงรายชื่อนักเรียนใน FlatList และลบรายการใน FlatList
9. พื้นฐานการใช้งาน React Navigation
ติดตั้ง React Navigation V6
ตัวอย่างการเปลี่ยนหน้าจอแบบง่ายๆ
การส่งข้อมูลไปยังรูทปลายทาง
วิธีผ่านค่ากลับไปยังรูทต้นทาง
10. การใช้งาน Bottom Tab Navigator
ติดตั้ง Bottom Tab Navigator
11. แบบฟอร์มและส่วนติดต่อกับผู้ใช้
TextInput คอมโพเนนต์
กำหนด state เก็บค่าอินพุต
Switch, Picker และ Modal คอมโพเนนต์ พร้อมการแสดงหน้าต่าง Alert
×
This is an unpublished lesson. This lesson will not be shown for students unless you set it as Public.
กลับไปที่แดชบอร์ด
ไม่มีเนื้อหาในบทเรียนนี้!
ไม่มีบทเรียน!
กลับไปที่แดชบอร์ด
เนื้อหาบทเรียนถูกล็อค
ลงทะเบียนเพื่อปลดล็อกบทเรียนนี้
ลงทะเบียนเพื่อปลดล็อค
บทเรียนต่อไป