React Native - Phần 4 - Tìm hiểu một số thành phần giao diện cụ thể trong React Native - Text input, ScrollView, ListView.
Bài đăng này đã không được cập nhật trong 7 năm
Danh sách các bài trước:
- React Native - Phần 1 - Hướng dẫn cài đặt môi trường phát triển ứng dụng với React Native
- React Native - Phần 2 - Viết chương trình đầu tiên và tìm hiểu vể Props, State
- React Native - Phần 3 - Tìm hiểu về Style, Height & Width và điều chỉnh Layout với Flexbox
Trong phần này, chúng ta sẽ cùng nhau tìm hiểu chi tiết hơn về một số thành phần giao diện cụ thể trong React Native
Điều khiển Text Input
TextInput là một thành phần cơ bản cho phép người dùng có thể nhập text. Nó có một tham số onChangeText dành cho việc cài đặt một function được gọi mỗi khi nội dung text trong khung nhập thay đổi, và một tham số onSubmitEditing để cài đặt function được gọi khi text được submit.
Để ví dụ, Hãy để người dùng nhâp text vào trong ô nhập, sau đó bạn sẽ dịch text đó sang một ngôn ngữ khác, giả thiết như trong ngôn ngữ mới, một một từ đều được biến đổi thành ký hiệu 🍕. Ví dụ như nếu nội dung text là "Hello there Bob" thì nó sẽ được dịch thành "🍕🍕🍕".
import React, { Component } from 'react';
import { AppRegistry, Text, TextInput, View } from 'react-native';
class PizzaTranslator extends Component {
constructor(props) {
super(props);
this.state = {text: ''};
}
render() {
return (
<View style={{padding: 10}}>
<TextInput
style={{height: 40}}
placeholder="Type here to translate!"
onChangeText={(text) => this.setState({text})}
/>
<Text style={{padding: 10, fontSize: 20}}>
{this.state.text.split(' ').map((word) => word && '🍕').join(' ')}
</Text>
</View>
);
}
}
AppRegistry.registerComponent('PizzaTranslator', () => PizzaTranslator);
Trong ví dụ trên, chúng ta sẽ lưu trữ nội dung text trong state, lý do bởi vì nội dung này được thay đổi liên tục.
Có rất nhiều điều mà bạn có thể nghĩ ra và làm với một TextInput. Ví dụ như bạn có thể validate ngay trong khi người dùng gõ nội dung. Để có thể hiểu rõ hơn bạn có thể tìm hiểu trong hai tài liệu sau React docs on controlled components, hoặc reference docs for TextInput.
Text input có lẽ là ví dụ đơn giản nhất thể hiện cho các thành phần mà trạng thái của chúng thường xuyên thay đổi trong thời gian ứng dụng chạy. Tiếp dưới đây chúng ta sẽ làm quen với các thành phần khác với vai trò là thành phần điều khiển, đó là ScrollView.
Sử dụng ScrollView
ScrollView là một thành phần giao diện cha, nó có thể chứa được nhiều những thành phần khác bên trong nó, và nó có khả năng scroll các thành phần ở bên trong nó. Các thành phần có thể scroll cần phải đồng nhất, và bạn có thể scroll dọc hoặc ngang bằng cách cài đặt cho thuộc tính horizontal.
Ví dụ dưới đây sẽ tạo ra một ScrollView chứa đựng cả hình ảnh và nội dung text.
import React, { Component } from 'react';
import { AppRegistry, ScrollView, Image, Text } from 'react-native'
class IScrolledDownAndWhatHappenedNextShockedMe extends Component {
render() {
return(
<ScrollView>
<Text style={{fontSize:16}}>Scroll me plz</Text>
<Image
style={{width: 50, height: 50}}
source={{uri: 'http://i0.kym-cdn.com/entries/icons/original/000/005/180/fuckthat.jpg'}} />
<Image
style={{width: 50, height: 50}}
source={{uri: 'http://i0.kym-cdn.com/entries/icons/original/000/005/180/fuckthat.jpg'}} />
<Text style={{fontSize:16}}>If you like</Text>
<Image
style={{width: 50, height: 50}}
source={{uri: 'http://i0.kym-cdn.com/entries/icons/original/000/005/180/fuckthat.jpg'}} />
<Image
style={{width: 50, height: 50}}
source={{uri: 'http://i0.kym-cdn.com/entries/icons/original/000/005/180/fuckthat.jpg'}} />
<Text style={{fontSize:16}}>Scrolling down</Text>
<Image
style={{width: 50, height: 50}}
source={{uri: 'http://i0.kym-cdn.com/entries/icons/original/000/005/180/fuckthat.jpg'}} />
<Image
style={{width: 50, height: 50}}
source={{uri: 'http://i0.kym-cdn.com/entries/icons/original/000/005/180/fuckthat.jpg'}} />
<Text style={{fontSize:16}}>What's the best</Text>
<Image
style={{width: 50, height: 50}}
source={{uri: 'http://i0.kym-cdn.com/entries/icons/original/000/005/180/fuckthat.jpg'}} />
<Image
style={{width: 50, height: 50}}
source={{uri: 'http://i0.kym-cdn.com/entries/icons/original/000/005/180/fuckthat.jpg'}} />
<Image
style={{width: 50, height: 50}}
source={{uri: 'http://i0.kym-cdn.com/entries/icons/original/000/005/180/fuckthat.jpg'}} />
<Text style={{fontSize:16}}>Framework around?</Text>
<Image
style={{width: 50, height: 50}}
source={{uri: 'http://i0.kym-cdn.com/entries/icons/original/000/005/180/fuckthat.jpg'}} />
<Image
style={{width: 50, height: 50}}
source={{uri: 'http://i0.kym-cdn.com/entries/icons/original/000/005/180/fuckthat.jpg'}} />
<Image
style={{width: 50, height: 50}}
source={{uri: 'http://i0.kym-cdn.com/entries/icons/original/000/005/180/fuckthat.jpg'}} />
<Text style={{fontSize:16}}>React Native</Text>
</ScrollView>
);
}
}
AppRegistry.registerComponent(
'IScrolledDownAndWhatHappenedNextShockedMe',
() => IScrolledDownAndWhatHappenedNextShockedMe);
AppRegistry.registerComponent(
'IScrolledDownAndWhatHappenedNextShockedMe',
() => IScrolledDownAndWhatHappenedNextShockedMe);
ScrollView làm việc tốt nhất khi nó dùng để hiển thị những thành phần nhỏ và đã bị giới hạn về kích thước. Tất cả các thành phần các view con của ScrollView sẽ được hiển thị sẵn sàng để có thể trượt được. Nếu như bạn có một danh sách dài và các thành phần đó có thể show fit được màn hình, khi đó bạn nên sử dụng ListView để thay thế. Và dưới đây chúng ta sẽ tìm hiểu về ListView ở ngay phần bên dưới.
Sử dụng ListView
ListView là thành phần hiển thị các thành phần con có thể vuốt dọc được, như các thành phần bên trong có cấu trúc tương tự nhau.
ListView yêu cầu hai thuộc tính dataSource và renderRow. Thuộc tính dataSource là thông tin nguồn để hiển thị lên ListView. renderRow sẽ trả về định dạng hiển thị của một row trong ListView.
Ví dụ ở dưới đây chúng ta sẽ tạo ra một ListView với dữ liệu được cung cấp sẵn. dataSource sẽ được khởi tạo đầu tiên để sử dụng cho ListView. Mỗi một item trong dataSource sẽ được hiển thị như một thành phần Text. Cuối cùng nó sẽ được hiển thị trên ListView.
import React, { Component } from 'react';
import { AppRegistry, ListView, Text, View } from 'react-native';
class ListViewBasics extends Component {
// Initialize the hardcoded data
constructor(props) {
super(props);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows([
'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin'
])
};
}
render() {
return (
<View style={{flex: 1, paddingTop: 22}}>
<ListView
dataSource={this.state.dataSource}
renderRow={(rowData) => <Text>{rowData}</Text>}
/>
</View>
);
}
}
// App registration and rendering
AppRegistry.registerComponent('ListViewBasics', () => ListViewBasics);
Đây là thành phần hay được sử dụng nhất để hiển thị dữ liệu được lấy về từ server. Để làm điều đó, phần 5 chúng ta sẽ tìm hiểu cách mà React Native tương tác với mạng internet nhé.
Nguồn tham khảo: React Native - The basic
All rights reserved
