คอมโพเนนท์หลัก (core components) สำคัญที่สุดใน React Native มีดังนี้:
| React Native Component | Android Native View | iOS Native View | Web Browser | คำอธิบาย |
|---|---|---|---|---|
| View - <View> | บน Android จะกลายเป็น <ViewGroup> | บน iOS จะกลายเป็น <UIView> | บนเว็บจะกลายเป็น <div> tag | คอนเทนเนอร์หลักรองรับ flexbox layout จัดการ touch handling |
| Text - <Text> | บน Android จะกลายเป็น <TextView> | บน iOS จะกลายเป็น <UITextView> | บนเว็บจะกลายเป็น <p> tag | ใช้แสดงข้อความ จัดการ styling และ touch events |
| Image - <Image> | บน Android จะกลายเป็น <ImageView> | บน iOS จะกลายเป็น <UIImageView> | บนเว็บจะกลายเป็น <img> tag | ใช้แสดงรูปภาพ |
| ScrollView - <ScrollView> | บน Android จะกลายเป็น <ScrollView> | บน iOS จะกลายเป็น <UIScrollView> | บนเว็บจะกลายเป็น <div> tag | คอนเทนเนอร์เลื่อนที่มีคอมโพเนนท์และวิว |
| TextInput - <TextInput> | บน Android จะกลายเป็น <EditText> | บน iOS จะกลายเป็น <UITextField> | บนเว็บจะกลายเป็น <input type="text"> tag | อินพุทให้ผู้ใช้กรอกข้อความ |
ตัวอย่าง
ตัวอย่างทำงานกับ <View>, <Text>, <Image>, <ScrollView> และ <TextInput>:
นำเข้า components จาก react-native:
import { View, Text, Image, ScrollView, TextInput } from 'react-native';
คอมโพเนนท์ View ใช้เป็น container สำหรับ text, button, Image ฯลฯ:
Inside View Container
ScrollView ทำงานเหมือน parent component จัดการ View, Text, Image, Button และ React Native Components อื่นๆ:
import React from 'react';
import { View, Text, Image, ScrollView, TextInput } from 'react-native';
const App = () => {
return (
Welcome to TutorialsPoints!
Inside View Container
);
}
export default App;
ผลลัพธ์
