Các thành phần cốt lõi quan trọng nhất trong react native như sau -
| React Native component | Chế độ xem Android gốc | Chế độ xem gốc iOS | Trình duyệt Web | Mô tả |
|---|---|---|---|---|
| View - | Khi ứng dụng được nhìn thấy trong thiết bị Android, thành phần | khi ứng dụng được nhìn thấy trong thiết bị IOS, thành phần | Khi được nhìn thấy trong trình duyệt web, thành phần | Đây là vùng chứa cốt lõi hỗ trợ bố cục flexbox. Nó cũng quản lý việc xử lý cảm ứng. |
| Văn bản - | Khi ứng dụng được nhìn thấy trong thiết bị Android, thành phần | khi ứng dụng được nhìn thấy trong thiết bị IOS, thành phần | Khi được nhìn thấy trong trình duyệt web, thành phần
| Được sử dụng để hiển thị văn bản cho người dùng. Nó cũng xử lý các sự kiện tạo kiểu và cảm ứng. |
| Hình ảnh - | Khi ứng dụng được nhìn thấy trong thiết bị Android, thành phần | Khi ứng dụng được nhìn thấy trong thiết bị IOS, thành phần | Khi được nhìn thấy trong trình duyệt web, thành phần | Được sử dụng để hiển thị hình ảnh. |
| Chế độ xem cuộn - | Khi ứng dụng được nhìn thấy trong thiết bị Android, thành phần | khi ứng dụng được nhìn thấy trong thiết bị IOS, thành phần | Khi được nhìn thấy trong trình duyệt web, thành phần | Vùng chứa cuộn có các thành phần và chế độ xem. |
| TextInput - | Khi ứng dụng được nhìn thấy trong thiết bị Android, thành phần | Khi ứng dụng được nhìn thấy trong thiết bị IOS, thành phần | Khi hiển thị bên trong trình duyệt web, thành phần | Phần tử đầu vào nơi người dùng có thể nhập văn bản |
Ví dụ
Sau đây là ví dụ làm việc với
Để làm việc với Text, View, Image, ScrollView, TextInput, bạn cần nhập các thành phần từ react -native như hình dưới đây -
import { View, Text, Image, ScrollView, TextInput } from 'react-native'; Thành phần View chủ yếu được sử dụng để giữ văn bản, nút, Hình ảnh, v.v. Thành phần này được sử dụng như sau -
<View>
<Text style={{ padding:"10%", color:"red" }}>Inside View Container</Text>
<Image
source={{
uri: 'https://www.tutorialspoint.com/react_native/images/logo.png',
}}
style={{ width: 311, height: 91 }}
/>
</View> Nó có thành phần Văn bản và Hình ảnh trong đó. Thành phần ScrollView hoạt động giống như một thành phần mẹ xử lý View, Text, Image, Button và các thành phần React Native khác.
import React from 'react';
import { View, Text, Image, ScrollView, TextInput } from 'react-native';
const App = () => {
return (
<ScrollView>
<Text style={{ padding:"10%", color:"green", "fontSize":"25" }}>Welcome to TutorialsPoints!</Text>
<View>
<Text style={{ padding:"10%", color:"red" }}>Inside View Container</Text>
<Image
source={{
uri:'https://www.tutorialspoint.com/react_native/images/logo.png',
}}
style={{ width: 311, height: 91 }}
/>
</View>
<TextInput
style={{
height: 40,
borderColor: 'black',
borderWidth: 1
}}
defaultValue="Type something here"
/>
</ScrollView>
);
}
export default App; Đầu ra
