Tạo một Ứng dụng Từ điển bằng React Native cho Android

Giới thiệu

React Native của Facebook là một framework mạnh mẽ cho phép bạn nhanh chóng và dễ dàng xây dựng các ứng dụng Android và iOS chỉ bằng JavaScript và JSX. Các ứng dụng được xây dựng bằng React Native tận dụng các thành phần giao diện người dùng gốc và do đó không thể phân biệt với các ứng dụng được xây dựng trực tiếp bằng SDK của Android và iOS.

Hiệu suất của chúng cũng không quá thua kém so với các ứng dụng gốc, bởi vì hầu như tất cả code JavaScript chạy trong nền trên một đối tượng nhúng của JavaScriptCore, tương tự JavaScript engine cung cấp cho Safari của Apple.

Trong hướng dẫn này, tôi sẽ giúp bạn làm quen với React Native cho Android bằng cách hướng dẫn bạn tạo một ứng dụng từ điển Anh-Đức đơn giản.

Yêu cầu

Trước khi bắt đầu, hãy đảm bảo là bạn đã cài đặt những phần mềm sau đây trên máy tính của bạn:

• phiên bản Android SDK và Android Support Library mới nhất
• hiên bản Node.js mới nhất

Tính đến tháng 9 năm 2015, React Native chỉ được hỗ trợ trên OS X. Tuy nhiên, với sự hỗ trợ của một vài script, React Native v0.11.4 hoạt động tốt trên Ubuntu 14.04.

1. Cài đặt React Native

React Native tồn tại dưới dạng một gói Node.js và có thể được cài đặt nhanh chóng bằng npm, Node Package Manager.

1

npm install -g react-native-cli

Để sử dụng React Native cho việc phát triển ứng dụng Android, bạn nên thiết lập giá trị của một biến môi trường có tên là ANDROID_HOME thành đường dẫn tuyệt đối của thư mục chứa Android SDK. Nếu bạn đang sử dụng Bash shell, bạn có thể thiết lập biến bằng export.

1

export ANDROID_HOME=/path/to/Android/Sdk

2. Tạo một Dự án Mới

Để tạo một dự án React Native, bạn nên sử dụng giao diện dòng lệnh hoặc CLI của React Native, nó có thể được truy xuất bằng lệnh react-native. Chúng ta đang tạo một ứng dụng từ điển trong hướng dẫn này vì vậy chúng ta hãy gọi dự án là Dictionary.

1

react-native init Dictionary

Một khi lệnh đã thực thi xong, bạn sẽ có một thư mục mới có tên là Dictionary, chứa một ứng dụng React Native cơ bản. Chuyển đến thư mục mới bằng lệnh cd.

1

cd Dictionary

Trước khi bạn tiếp tục, tôi khuyên bạn nên chạy ứng dụng cơ bản này để đảm bảo rằng môi trường phát triển của bạn có tất cả mọi thứ mà React Native cần. Để làm điều đó, hãy gõ lệnh sau đây:

1

react-native run-android

Bây giờ bạn sẽ thấy một ứng dụng được gọi là Dictionary đã được cài đặt trên emulator của bạn. Hãy nhấp vào biểu tượng của nó để chạy nó. Nếu mọi việc suôn sẻ, bạn sẽ thấy màn hình như sau:

3. Chuẩn bị Khởi điểm của Ứng dụng

Mặc định, khởi điểm của ứng dụng Android bằng React Native là tập tin JavaScript index.android.js. Khi bạn tạo dự án bằng CLI của React Native, thì tập tin này được tạo ra một cách tự động. Tuy nhiên, nó chứa code thuộc về ứng dụng cơ bản. Bạn có thể chỉnh sửa và sử dụng các phần của code đó cho ứng dụng của bạn hoặc bạn chỉ cần xóa tất cả và bắt đầu từ đầu. Đối với hướng dẫn này, tôi đề nghị bạn làm theo cách thứ hai.

Một khi bạn đã xóa nội dung của index.android.js, hãy sử dụng require để nạp một mô-đun gọi là react-native. Mô-đun này chứa tất cả hàm của React Native và các đối tượng mà bạn cần để tạo ứng dụng của bạn.

1

var React = require('react-native');

4. Tạo một Thành phần React

Các thành phần React là các đối tượng JavaScript chịu trách nhiệm kết xuất và tự động cập nhật giao diện người dùng của ứng dụng React Native. Trên thực tế, hầu hết mọi yếu tố giao diện người dùng của ứng dụng React Native là một thành phần React. Điều này có nghĩa là, để tạo giao diện người dùng ứng dụng của bạn, bạn cần tạo thành phần React tuỳ biến của riêng mình. Để làm điều đó, sử dụng hàm createClass của React. Đoạn code sau đây tạo một thành phần gọi là Dictionary:

1

var Dictionary = React.createClass({

2

3

});

Bạn có thể xem thành phần này như là màn hình đầu tiên của ứng dụng.

Bước 1: Định nghĩa Layout

React Native tự động gọi hàm render mỗi khi nó cần vẽ hoặc cập nhật một thành phần. Vì vậy, bạn phải thêm hàm này vào thành phần của bạn. Bên trong hàm, bạn có thể xác định layout của thành phần bằng JSX, một cú pháp mở rộng của JavaScript cho phép bạn dễ dàng kết hợp các thẻ XML với code JavaScript.

React Native cung cấp một số thành phần mà bạn có thể sử dụng để sắp xếp layout. Bây giờ, chúng ta sẽ được sử dụng một React.View như là một container (phần tử kho chứa), một React.Text để hiển thị văn bản, và một React.TextInput để chấp nhận đầu vào từ người dùng. Thêm code sau đây vào thành phần:

1

render: function() {

2

    var layout =

3

        <React.View style = { styles.parent } >

4

5

            <React.Text>

6

                Type something in English:

7

            </React.Text>

8

9

            <React.TextInput />

10

11

            <React.Text style = { styles.germanLabel } >

12

                Its German equivalent is:

13

            </React.Text>

14

15

            <React.Text style = { styles.germanWord } >                

16

            </React.Text>

17

18

        </React.View>

19

    ;

20

  return layout;

21

},

Nếu bạn nắm vững HTML, bạn có thể nghĩ về View như là một div trong HTML, Text như là một span trong HTML và TextInput như một phần tử input trong HTML.

Bước 2: Thêm Phong cách

Trong đoạn code ở trên, một số thành phần có một thuộc tính style. Thuộc tính style khá tương đồng với thuộc tính class của HTML. Tuy nhiên, thay vì tham chiếu đến một class CSS trong một stylesheet, nó tham chiếu đến một đối tượng JSON trong một đối tượng React.StyleSheet.

Để tạo một đối tượng React.StyleSheet cho ứng dụng của bạn, bạn cần sử dụng hàm React.StyleSheet.create. Theo như đối số duy nhất của nó, thì nó nhận một đối tượng JSON chứa các phong cách của các thành phần riêng lẻ. Đây là những phong cách mà tôi đã sử dụng cho ứng dụng ví dụ của chúng ta:

1

var styles = React.StyleSheet.create({

2

3

	// For the container View

4

    parent: {

5

        padding: 16

6

    },

7

8

	// For the Text label

9

    germanLabel: {

10

        marginTop: 20,

11

        fontWeight: 'bold'

12

    },

13

14

	// For the Text meaning

15

    germanWord: {

16

        marginTop: 15,

17

        fontSize: 30,

18

        fontStyle: 'italic'

19

    }

20

});

Bước 3: Đăng ký Thành phần

Để cho React Native biết rằng nó nên kết xuất thành phần của bạn khi ứng dụng của bạn khởi chạy, bạn phải đăng ký nó bằng hàm React.AppRegistry.registerComponent. Để làm điều đó, hãy thêm code sau vào cuối index.android.js:

1

React.AppRegistry.registerComponent('Dictionary', () => Dictionary);

Nếu bạn không nắm vững các hàm arrow của ES6, thì bạn chỉ cần sử dụng code JavaScript thông thường sau đây để thay thế:

1

React.AppRegistry.registerComponent('Dictionary', function() {

2

	return Dictionary;

3

});

Nếu bạn muốn, bạn có thể tải lại ứng dụng của mình để xem layout mới. Để làm điều đó, hãy bấm vào nút menu trên emulator của bạn và nhấp vào Reload JS.

4. Điều khiển Trạng thái của Thành phần

Tất cả các thành phần có một biến thành viên đặc biệt được gọi là state, nó là một đối tượng JSON. Nó đặc biệt, bởi vì ngay khi biến state của một thành phần thay đổi, React Native tự động tái kết xuất thành phần để phản ánh sự thay đổi này. Đây là một tính năng rất hữu ích và bằng cách sử dụng nó một cách chính xác, bạn có thể loại bỏ việc lấy hoặc cập nhật nội dung trong các phân tử giao diện người dùng của ứng dụng bằng tay.

Hãy thêm hai khoá, input và output, vào biến state của thành phần Dictionary. Để làm như vậy, bạn sẽ phải sử dụng một hàm gọi là getInitialState. Giá trị trả về của hàm này trở thành state (trạng thái) của thành phần.

1

getInitialState: function() {

2

    return {

3

        input: '',

4

        output: ''

5

    };

6

},

Bây giờ bạn có thể liên kết TextInput với input và thành phần Text với output. Sau khi làm như vậy, layout của bạn sẽ giống như thế này:

1

<React.View style = { styles.parent } >

2

3

    <React.Text>

4

        Type something in English:

5

    </React.Text>

6

7

    <React.TextInput text = { this.state.input } />

8

9

    <React.Text style = { styles.germanLabel } >

10

        Its German equivalent is:

11

    </React.Text>

12

13

    <React.Text style = { styles.germanWord } >

14

        { this.state.output }

15

    </React.Text>

16

17

</React.View>

Như bạn có thể thấy, input sẽ chứa từ tiếng Anh mà người dùng nhập vào trong khi output sẽ chứa từ tiếng Đức tương ứng của nó.

Mặc dù những thay đổi state được tự động đẩy vào giao diện người dùng, nhưng ngược lại thì không đúng. Điều này có nghĩa là, state của thành phần không thay đổi nếu người dùng nhập một cái gì đó vào TextInput. Để cập state một cách thủ công, bạn nên sử dụng phương thức setState của thành phần.

Để gửi giá trị của TextInput đến input, bạn có thể thêm một listener onChangeText vào TextInput và thực hiện cuộc gọi setState bên trong nó. Sử dụng ES6, thẻ TextInput sẽ giống như thế này:

1

<React.TextInput text = { this.state.input }

2

	onChangeText={(e) => this.setState({input: e})}

3

/>

Tại thời điểm này, bất cứ điều gì mà người dùng nhập vào TextInput của ứng dụng của bạn đều có sẵn trong input. Tất cả những gì còn lại để làm là ánh xạ input sang tiếng Đức tương ứng và cập nhật output. Để làm điều đó, bạn có thể sử dụng một từ điển có tên là Mr.Honey's Beginner's Dictionary (Đức-Anh) của Winfried Honig. Tải về JSON tương ứng của từ điển từ GitHub và thêm nó vào dự án của bạn.

Để nạp từ điển bên trong index.android.js, hãy sử dụng require.

1

var english_german = require('./english_german.json');

Vì english_german không có gì khác hơn một đối tượng JSON toàn cục, nơi mà các từ tiếng Anh là các khóa và các từ tương đương của tiếng Đức là các giá trị, tất cả những gì bạn phải làm bây giờ là kiểm tra xem input có là một khoá hay không, nếu có, hãy gọi setState để gán các giá trị được liên kết vào output. Code để làm điều đó có thể như sau:

1

showMeaning: function() {

2

	// Use the ternary operator to check if the word 

3

	// exists in the dictionary.

4

	var meaning = this.state.input in english_german ? 

5

		            english_german[this.state.input] : 

6

		            "Not Found";

7

8

	// Update the state

9

	this.setState({

10

		 output: meaning 

11

	});

12

},

Bây giờ bạn có thể chỉ định showMeaning cho listener onSubmitEditing của TextInput để nó chỉ được gọi khi người dùng đã gõ xong.

1

<React.TextInput

2

    onChangeText={(e) => this.setState({input: e})}

3

    text = { this.state.input }

4

    onSubmitEditing = { this.showMeaning }

5

/>

Ứng dụng từ điển của bạn đã sẵn sàng. Bạn có thể tải lại nó và gõ vào một từ tiếng Anh để ngay lập tức xem bản dịch sang tiếng Đức.

Tóm tắt

Trong hướng dẫn này, bạn đã học được cách cài đặt React Native và sử dụng nó để tạo ứng dụng Android đầu tiên của bạn, một từ điển Anh-Đức, chỉ sử dụng JavaScript và JSX. Song song đó, bạn đã học được cách tạo ra một thành phần tùy biến, trang trí nó và sử dụng state (trạng thái) của nó để kiểm soát những gì mà nó hiển thị.

Để tìm hiểu thêm về React Native, bạn có thể xem qua tài liệu hướng dẫn.