Như đã đề cập ở bài Tìm hiểu về React Native (phần 1). React Native cung cấp 1 bộ React Native’s Core Components các components cơ bản sau:
1.Text Input
TextInput cho phép người dùng nhập văn bản.
Các props:
+ onChangeText : nhận một hàm được gọi mỗi khi văn bản thay đổi
+ onSubmitEditing: nhận một hàm được gọi khi văn bản được gửi.
import React, {useState} from 'react';
import {Text, TextInput, View} from 'react-native';
const PizzaTranslator = () => {
const [text, setText] = useState('');
return (
<View style={{padding: 10}}>
<TextInput
style={{height: 40}}
placeholder="Type here to translate!"
onChangeText={newText => setText(newText)}
defaultValue={text}
/>
<Text style={{padding: 10, fontSize: 42}}>
{text
.split(' ')
.map(word => word && '🍕')
.join(' ')}
</Text>
</View>
);
};
export default PizzaTranslator;Trong ví dụ trên chúng tôi đã lưu text vào state bởi vì text bị thay đổi theo thời gian.
2.ScrollView
ScrollView là một container cuộn chung, chứa nhiều components and views. Các items có thể cuộn không đồng nhất và cuộn theo cả chiều dọc, chiều ngang (bằng cách đặt thuộc tính ngang).
const App = () => (
<ScrollView>
<Text style={{fontSize: 96}}>Scroll me plz</Text>
<Image source={logo} />
<Image source={logo} />
<Image source={logo} />
<Image source={logo} />
<Image source={logo} />
<Text style={{fontSize: 96}}>If you like</Text>
<Image source={logo} />
<Image source={logo} />
<Image source={logo} />
<Image source={logo} />
<Image source={logo} />
<Text s;tyle={{fontSize: 96}}>Scrolling down</Text>
<Image source={logo} />
<Image source={logo} />
<Image source={logo} />
<Image source={logo} />
<Image source={logo} />
<Text style={{fontSize: 96}}>What's the best</Text>
<Image source={logo} />
<Image source={logo} />
<Image source={logo} />
<Image source={logo} />
<Image source={logo} />
<Text style={{fontSize: 96}}>Framework around?</Text>
<Image source={logo} />
<Image source={logo} />
<Image source={logo} />
<Image source={logo} />
<Image source={logo} />
<Text style={{fontSize: 80}}>React Native</Text>
</ScrollView>
);
export default AppCác props:
+ pagingEnabled: cho phép phân trang qua các chế độ xem bằng hành động vuốt.
+ ViewPager: cho phép phân trang qua các chế độ xem bằng hành động vuốt theo chiều ngang trong Android
+ maximumZoomScale: chỉ sử dụng trên iOS để zoom bẳng hành động mở rộng để phóng to
+ minimumZoomScale: chỉ sử dụng trên iOS để zoom bẳng hành động chụm để thu nhỏ
3.List Views
3.1.FlatList
FlatList hiển thị một danh sách cuộn chứa dữ liệu thay đổi. Không giống như ScrollView, FlatList chỉ hiển thị các phần tử hiện đang hiển thị trên màn hình chứ không hiển thị tất cả các phần tử cùng một lúc.
Các props:
+ data: nguồn dữ liệu cho danh sách
+ renderItem: Lấy một item(mục) từ nguồn dữ liệu và trả về một item đã được định dạng để hiển thị ra component
import React from 'react';
import {FlatList, StyleSheet, Text, View} from 'react-native';
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 22,
},
item: {
padding: 10,
fontSize: 18,
height: 44,
},
});
const FlatListBasics = () => {
return (
<View style={styles.container}>
<FlatList
data={[
{key: 'Devin'},
{key: 'Dan'},
{key: 'Dominic'},
{key: 'Jackson'},
{key: 'James'},
{key: 'Joel'},
{key: 'John'},
{key: 'Jillian'},
{key: 'Jimmy'},
{key: 'Julie'},
]}
renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
/>
</View>
);
};
export default FlatListBasics;3.2. SectionList
SectionList hiển thị một tập hợp dữ liệu được chia thành các phần logic, có thể có “section headers”, tương tự như UITableViews trên iOS, thì SectorList là cách tốt nhất.
import React from 'react';
import {SectionList, StyleSheet, Text, View} from 'react-native';
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 22,
},
sectionHeader: {
paddingTop: 2,
paddingLeft: 10,
paddingRight: 10,
paddingBottom: 2,
fontSize: 14,
fontWeight: 'bold',
backgroundColor: 'rgba(247,247,247,1.0)',
},
item: {
padding: 10,
fontSize: 18,
height: 44,
},
});
const SectionListBasics = () => {
return (
<View style={styles.container}>
<SectionList
sections={[
{title: 'D', data: ['Devin', 'Dan', 'Dominic']},
{
title: 'J',
data: [
'Jackson',
'James',
'Jillian',
'Jimmy',
'Joel',
'John',
'Julie',
],
},
]}
renderItem={({item}) => <Text style={styles.item}>{item}</Text>}
renderSectionHeader={({section}) => (
<Text style={styles.sectionHeader}>{section.title}</Text>
)}
keyExtractor={item => `basicListEntry-${item}`}
/>
</View>
);
};