Chào các bạn, mình là Vũ. Hôm nay mình sẽ tiếp tục seri hướng dẫn react native với bài hướng dẫn về các Component cơ bản Text, Image, Button.
Để cho bài viết được dễ hiểu hơn (và dễ viết hơn, đối với mình), mình sẽ làm 1 ứng dụng (cực kỳ đơn giản) để mọi người mới dễ dàng nắm bắt. Ứng dụng cuối cùng của ta trông sẽ như thế này:
Ứng dụng rất đơn giản, chỉ có 1 dòng Text giới thiệu tên mình, có 1 Image hiển thị mặt của mình, và 1 Button. Khi nhấn vào button sẽ hiện lên 1 thông báo. Quá simple phải không? Mình nghĩ là không cần phức tạp làm gì.
Yeah, giờ ta sẽ bắt tay vào công việc nhé.
[toc]
Khởi tạo project
Ta sẽ tạo project và đặt tên cho nó là TextImageButton. Trong command line, gõ câu lệnh:
react-native init TextImageButton
Đợi chút cho project được tạo xong. Ta sẽ mở thư mục dự án trong IDE (ở đây mình dùng SublimeText). Chạy dự án:
react-native run-android
Sau đó ta thiết lập tùy chọn Hot reloading cho ứng dụng.
Giờ bạn hãy để ý trong file index.js (file này sẽ được load đầu tiên khi ứng dụng khởi chạy):
import App from './App';
AppRegistry.registerComponent('TextImageButton', () => App);
Ở đây ta sẽ sử dụng component App ở trong file App.js là component khởi tạo của ứng dụng.
Lưu ý: để sử dụng 1 class không nằm trong file đang làm việc, ta phải import nó. Import 1 class sử dụng câu lệnh
import tên_class from đường_dẫn_file
Lưu ý: tên đường dẫn file không bắt buộc phải có phần mở rộng.
Ok, giờ ta sẽ vọc tiếp vào component App, đây sẽ chính là nơi ta tạo ra giao diện cho ứng dụng này.
StyleSheet
Như bài trước mình đã nói, Component là thứ hiển thị ra giao diện của người dùng. Mỗi Component đều phải có 1 hàm render() để trả ra các View. Component App này cũng vậy. Nó cũng có 1 hàm render(), và hiện tại nó đang trả về 1 View chứa 3 đối tượng Text bên trong. Trước tiên mình sẽ xóa 3 dòng Text đó đi, và tùy chỉnh 1 chút giao diện cho View, sử dụng StyleSheet.
Hàm render của mình hiện tại sẽ thế này:
render() {
return (
<View style={styles.containerStyle}>
</View>
);
}
Đối với Android và iOS, ta phải sử dụng XML để style cho các thành phần giao diện, thì trong React Native, chúng ta tùy chỉnh giao diện bằng JavaScript. Mọi Component đều có 1 thuộc tính style. Bạn có thể thấy đối tượng View có thuộc tính
style={styles.containerStyle}
Hãy nhìn xuống cuối file App.js. Có 1 hằng số styles được định nghĩa sẵn như vậy:
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#00FF00',
marginBottom: 5,
},
});
Đây chính là nơi tùy chỉnh các giao diện của các đối tượng được render ra bởi Component. Bạn có thể thấy nó gần giống với cấu trúc của CSS. Và đối tượng View ở hàm render đang sử dụng đối tượng con containerStyle thuộc const styles để làm style hiển thị. Giờ mình muốn thay đổi màu nền thành màu hồng cho nam tính, mình sẽ sửa lại đối tượng container như sau:
containerStyle: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#ffc1c1',
}
và xóa đi 2 đối tượng instruction và welcome không dùng đến. Styles của chúng ta giờ sẽ thế này:
const styles = StyleSheet.create({
containerStyle: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#ffc1c1',
}
});
Giờ save lại ta đã thấy sự thay đổi:
Ok, như vậy là đã đổi đc background của màn hình.
Tóm lại, ta chỉ cần nhớ, để tạo ra style cho các Component ta sử dụng hàm:
StyleSheet.create() rồi định nghĩa các style bên trong. Và tất nhiên không quên import class StyleSheet qua câu lệnh import. Ở đây mình sẽ import 1 lượt tất cả các Component sử dụng trong ứng dụng như sau:
import {
Platform,
StyleSheet,
Text,
View,
Image,
Alert,
TouchableOpacity
} from 'react-native';
Chúng ta sẽ sử dụng Styles xuyên suốt quá trình phát triển ứng dụng. Vì vậy mình sẽ nói kỹ hơn ở các phần tiếp tới. Giờ hãy tạo 1 dòng Text trên màn hình nào.
Text
Ở trên ta đã khai báo View là Component tổng, nó chứa tất cả các Component con bên trong. Để hiển thị 1 dòng Text, ta sẽ khai báo thêm 1 Component Text nằm trong View như sau:
<View style={styles.containerStyle}>
<Text style={styles.textStyle}>Xin chào tất cả mọi người, mình là Vũ</Text>
</View>
Việc khai báo đối tượng Text quá đơn giản đúng không. Ở đây component Text có style là đối tượng con textStyle thuộc biến styles. Ta khai báo thêm đối tượng textStyle để tùy chỉnh giao diện cho Text nào:
const styles = StyleSheet.create({
containerStyle: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#FFC1C1',
},
textStyle:{
color:'#990000',
fontSize:25,
textAlign:'center',
justifyContent:'center',
margin:40
}
});
Như vậy là đã khai báo textStyle có màu chữ (color), cỡ chữ (fontSize), thuộc tính căn chỉnh (textAlign), khoảng cách với các đối tượng khác (margin), ta thử save lại và kiểm nghiệm kết quả:
Yeah, trông khá đẹp. Đúng không? Giờ Mình sẽ thêm 1 hình ảnh trên màn hình ứng dụng sử dụng component Image.
Image
Ta sẽ tạo 1 Image và load ảnh từ 1 url trên internet vào image đó. Ở trong View, ta thêm component Image như sau:
<View style={styles.containerStyle}>
<Text style={styles.textStyle}>Xin chào tất cả mọi người, mình là Vũ</Text>
<Image style={styles.imageStyle}
source={{uri: 'https://cungdev.com/wp-content/uploads/2018/02/avatar-300x300.jpg'}}>
</Image>
</View>
Như các bạn thấy ngoài thuộc tính style như đã trình bày, Image còn có thêm 1 thuộc tính source. Đây chính là thuộc tính chỉ ra nguồn (địa chỉ) hình ảnh sẽ được load ra. ở đây mình truyền vào 1 uri, có giá trị là địa chỉ ảnh trên internet.
Và cuối cùng, ta tạo ra imageStyle bằng cách thêm vào trong biến styles:
imageStyle:{
width: 200, height: 200,
marginBottom:20,
borderTopLeftRadius:10,
borderTopRightRadius:10,
borderBottomLeftRadius:10,
borderBottomRightRadius:10
}
Như các bạn thấy Image này sẽ có kích thước 200×200, bo 4 góc 10 pixel. Rất đơn giản đúng không. Save lại và ta thấy:
Okie, giờ sẽ đến phần tạo 1 nút bấm nhé.
Button
Trong React Native, ta có thể sử dụng component TouchableOpacity để hiển thị dạng nút bấm (button). Thêm vào đó ta sẽ sử dụng thuộc tính onPress để định nghĩa các hành động khi người dùng bấm vào TouchableOpacity đó.
Đầu tiên,mình sẽ tạo 1 thư mục để chứa ảnh cho button. Trong thư mục gốc project, mình sẽ tạo 1 thư mục img để chứa ảnh, và ném 1 file ảnh có tên button.png vào. Sau đó mình khai báo thêm Component TouchableOpacity như sau:
<TouchableOpacity onPress={() => { Alert.alert('cungdev.com', 'Xin chào các bạn');}}>
<Image style={styles.imageButtonStyle} source={require('./img/button.png')}></Image>
</TouchableOpacity>
Thứ nhất, các bạn thấy là ta đã định nghĩa sự kiện khi bấm vào TouchableOpacity thông qua thuộc tính onPress. Ở đây ta sẽ cho hiển thị 1 dialog lên.
Thứ 2, TouchableOpacity chỉ là Component bắt sự kiện onPress, còn để hiển thị giao diện Button theo ý muốn ta cần định nghĩa các Component bên trong TouchableOpacity, như ở bên trên mình sử dụng 1 Image. Ta định nghĩa thêm style cho Image:
imageButtonStyle:{
width:70, height:70
}
Thứ 3, các bạn thấy ở đây source của Image không còn là 1 uri trên internet, mà là 1 file ảnh trong project. Mình sử dụng thuộc tính source:
source={require('./img/button.png')}
Chính là require tới file ảnh mà mình mới tạo trong thư mục img ban đầu. Save lại và ta thấy:
và khi bấm vào, ta thấy:
Ok, vậy là đã bắt sự kiện thành công cho button. Đơn giản đúng không.
Tổng kết
Bài này mình đã trình bày xong về các Component cơ bản như View, Text, Image, TouchableOpacity. Mình cũng trình bày sơ qua về cách tùy chỉnh giao diện sử dụng StyleSheet. Trong bài sau mình sẽ nói kỹ hơn về vấn đề style các Component trong ứng dụng. Hãy theo dõi nhé.
