Blog Study

Chào các bạn, hôm nay mình sẽ giới thiệu tới mọi người những bước cơ bản đầu tiên để viết ứng dụng bằng React Native. Không nói nhiều nữa mình sẽ đi thẳng vào vấn đề chính nhé.!

Các Bước Để Viết Ứng Dụng

Tạo file dùng chung cho cả iOS và Android, một việc không thể thiếu với React Native. Ưu điểm của nó là code một lần và dùng cho nhiều hệ điều hành vậy nên việc tách riêng, code riêng từng file cho từng hệ điều hành là không nên.
Mặc định khi tạo project chúng ta sẽ có 2 file đó là "index.ios.js" và "index.android.js". Từng bước chúng ta thực hiện đó là:

- Tạo file mới và đặt tên cho nó ở đây mình đặt tên là "hello.js" - file dùng chung cho cả Android và IOS.
- Chỉnh sửa code ở cả 2 file "index.ios.js" và "index.android.js":

var React = require('react-native'); // khai báo react native
var hello = require('./hello.js'); // Khai báo đường dẫn file chứa class cần sử dụng chính.
var {AppRegistry} = React; // Khai báo biến đăng kí component
AppRegistry.regesterComponent('HelloWorld', ()=>hello); // Khai báo tên class và nơi chứa class

- Chỉnh sửa code tại file chính "project01.js":

Chúng ta chia code ra thành 3 phần chính:
- Phần header: Phần này để khai báo những biến, những class, những thư viện được import để sử dụng trong class.

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';

// Chúng ta vừa khai báo các thư viện cần sử dụng của react native, nếu như bạn muốn sử dụng thêm những component react native hỗ trợ bạn có thể vào đây để tìm hiểu thêm.

- Phần Content: Khai báo class và các function của class.

class HelloWorld extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Hello World.!
</Text>
<Text style={styles.instructions}>

</Text>
<Text style={styles.instructions}>
My first app.
</Text>
</View>
);
}
}

// Một function bắt buộc cần có đó chính là hàm render để trả về những giá trị hiển thị của ứng dụng.

- Phần Footer: Khai báo style cho phần hiển thị.

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: 'center',

alignItems: 'center',

backgroundColor: '#F5FCFF',

welcome: {

fontSize: 20,

textAlign: 'center',

margin: 10,

instructions: {

textAlign: 'center',

color: '#333333',

marginBottom: 5,

});

// Phần này các bạn học html css chắc chắn không lạ gì cả, bạn chỉ cần khai báo tên của styles rồi cho các thuộc tính là có thể sử dụng cho phần hiển thị của content. Lưu ý rằng tên của các thuộc tính không giống với html css nên bạn cần chú ý. Bạn có thể vào trang chủ React Native để xem chi tiết các style của từng component.

Phần cuối:

LƯU Ý: Khi bạn tạo một class chính sử dụng và được đăng kí ở 2 file "index.ios.js" và "index.android.js" thì bạn cần khai báo ở file dùng chung này là:

module.exports = HelloWorld;

// Như vậy để biết bạn muốn dùng class nào trong file này.

Đối với những file khác bạn không cần làm như vậy mà bạn có thể khai báo ngay khi tạo class ở content bằng cách thêm phía trước class (Tên project) là "export default" . Vậy bạn sẽ có là

export default class (Tên project) extends Component

Như vậy bạn đã có thể tạo một project đơn giản đầu tiên của mình. Bạn có thể xem code hoàn chỉnh của mình tại đây,

Và đây thành quả của chúng ta có được.!