React Native คือ ตอนที่ 3 : ส่วนประกอบ (Components) ของ React Native

1. React Native คืออะไร
2. ทำความเข้าใจกับส่วนประกอบ. (Components) React Native
   2.1 View
   2.2 Text
   2.3 Image
   2.4 Button
   2.5 TextInput
   2.6 ScrollView และ FlatList
   2.7 StyleSheet
3. การสร้างแอปข้ามแพลตฟอร์มด้วย React Native Components

การทำแอพ React Native และทำแอพมือถือที่รองรับการใช้งานข้ามแพลตฟอร์มไม่ใช่ความฝันอีกต่อไป ต้องขอบคุณ React Native กรอบจาวาสคริปต์ที่พัฒนาโดย Facebook มันกลายเป็นความจริงที่เรียบง่าย ในบทความนี้ เราจะลงลึกในการทำความเข้าใจเกี่ยวกับองค์ประกอบพื้นฐานของแอปพลิเคชัน React Native ส่วนประกอบที่สำคัญ และวิธีการใช้ส่วนประกอบเหล่านี้เพื่อทำแอพ React Native และทำแอพมือถือที่น่าทึ่ง

1. React Native คืออะไร

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

React Native หมุนรอบแนวคิดของส่วนประกอบ UI ทั้งหมดของแอปพลิเคชันประกอบด้วยโมดูลที่มีอยู่ในตัวเอง ทำให้เป็นหน่วยพื้นฐานของแอปพลิเคชัน React Native

2. ทำความเข้าใจกับส่วนประกอบ. (Components) React Native

ส่วนประกอบ React Native นั้นคล้ายกับส่วนประกอบ ReactJS แต่แทนที่จะทำงานในเบราว์เซอร์ ส่วนประกอบเหล่านี้จะแสดงส่วนประกอบดั้งเดิม มาสำรวจองค์ประกอบหลักของ React Native ที่คุณจะใช้บ่อยๆ เมื่อทำแอพ React Native และทำแอพมือถือ

2.1 View

View เป็นองค์ประกอบพื้นฐานที่สุดในการสร้าง UI ใน React Native ซึ่งเทียบเท่ากับ <div>ใน HTML และใช้เพื่อสรุปส่วนประกอบอื่นๆ รองรับคุณสมบัติสไตล์ เค้าโครง และการจัดการสัมผัส

<View style={{ padding: 10 }}>
  <Text>Hello, world!</Text>
</View>

2.2 Text

ส่วนประกอบ Textใน React Native ใช้สำหรับแสดงข้อความ ซึ่งแตกต่างจาก HTML ใน React Native คุณไม่สามารถวางข้อความได้ทุกที่ จะต้องอยู่ภายใน Text ส่วนประกอบ

<Text style={{ fontSize: 20 }}>Hello, React Native!</Text>

2.3 Image

คอมโพเนนต์ นี้ Imageใ ช้เพื่อแสดงรูปภาพประเภทต่างๆ รวมถึงรูปภาพเครือข่าย ทรัพยากรแบบคงที่ รูปภาพในเครื่องชั่วคราว และรูปภาพจากดิสก์ในเครื่อง เช่น ม้วนฟิล์ม

<Image source={{ uri: 'path_to_your_image' }} style={{ width: 200, height: 200 }} />

2.4 Button

Button เป็นส่วนประกอบที่สัมผัสได้ซึ่งใช้สำหรับจัดการการโต้ตอบของผู้ใช้ วิธีที่ง่ายที่สุดในการใช้งานคือการจัดเตรียม onPress ฟังก์ชันและข้อความชื่อเรื่อง

<Button title="Click me!" onPress={() => console.log('Button clicked!')} />

2.5 TextInput

คอมโพเนนต์ นี้ TextInput ใช้สำหรับรวบรวมอินพุตของผู้ใช้ที่เป็นข้อความ มีคุณสมบัติในการปรับแต่งรูปลักษณ์ จัดการอินพุตของผู้ใช้ และใช้งานคุณสมบัติต่างๆ เช่น การแก้ไขอัตโนมัติ

<TextInput style={{ height: 40, borderColor: 'gray', borderWidth: 1 }} value="Hello, World!" />

2.6 ScrollView และ FlatList

ScrollView และ FlatList ใช้สำหรับจัดการข้อมูลตามรายการ ScrollViewใช้สำหรับองค์ประกอบจำนวนน้อย ในขณะที่ FlatList มีประสิทธิภาพมากกว่าสำหรับรายการขนาดใหญ่

<FlatList
  data={[{ key: 'item1' }, { key: 'item2' }, { key: 'item3' }]}
  renderItem={({ item }) => <Text>{item.key}</Text>}
/>

2.7 StyleSheet

แม้ว่าจะไม่ใช่คอมโพเนนต์ แต่ StyleSheet ก็เป็นส่วนสำคัญของ React Native ที่ให้คุณกำหนดสไตล์ภายนอกคอมโพเนนต์ของคุณ ซึ่งคล้ายกับ CSS

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  title: {
    fontSize: 20,
  },
});

3. การสร้างแอปข้ามแพลตฟอร์มด้วย React Native Components

การทำความเข้าใจองค์ประกอบพื้นฐานของ React Native เหล่านี้สามารถกำหนดขั้นตอนสำหรับการพัฒนาแอปที่ซับซ้อนมากขึ้นได้ แต่ละส่วนประกอบมีชุดอุปกรณ์ประกอบฉากที่กำหนดไว้ล่วงหน้าซึ่งสามารถใช้สำหรับการปรับแต่งและจัดการเหตุการณ์ต่างๆ

ตัวอย่างเช่น ในการสร้างฟอร์ม เราอาจใช้ส่วนประกอบView, Text, TextInput, และ Buttonเราสามารถจัดเรียงช่องป้อนข้อมูลภายใน a Viewใช้Textเพื่อติดป้ายกำกับแต่ละฟิลด์TextInputเพื่อให้ผู้ใช้ป้อนข้อมูล และ a Buttonเพื่อส่งแบบฟอร์ม ด้วย StyleSheet เราสามารถเพิ่มสไตล์ที่กำหนดเองให้กับแต่ละองค์ประกอบเหล่านี้ได้

นอกจากนี้ ด้วยการใช้คอมโพเนนต์ เช่น ScrollView หรือ FlatList เราสามารถจัดการและแสดงชุดข้อมูลขนาดใหญ่ได้อย่างมีประสิทธิภาพ ซึ่งเป็นสิ่งที่มักจำเป็นในแอปพลิเคชันมือถือ ด้วยการกำหนดคีย์เฉพาะให้กับแต่ละรายการ React สามารถติดตามว่ารายการใดถูกเพิ่ม เปลี่ยนแปลง หรือลบ ซึ่งนำไปสู่การอัปเดตและการเรนเดอร์ที่มีประสิทธิภาพ

ในขณะที่ React Native มาพร้อมกับส่วนประกอบในตัวมากมาย กรอบงานยังช่วยให้นักพัฒนาสามารถสร้างส่วนประกอบที่กำหนดเองได้ คอมโพเนนต์แบบกำหนดเองสามารถสรุปโค้ด UI ที่ซับซ้อนเพื่อใช้ซ้ำได้ ช่วยเพิ่มความสามารถในการอ่านและการบำรุงรักษาโค้ด

---

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

---

React Native คืออะไร

React Native คือ ตอนที่ 2 : พื้นฐาน React Native

React Native คือ ตอนที่ 4 : React Native CLI กับ Expo