LẬP TRÌNH ỨNG DỤNG TODO LIST BẰNG REACT NATIVE

Để lập trình một ứng dụng Todo List (nhắc việc cần làm) bằng React Native, bạn sẽ cần cài đặt môi trường phát triển React Native và một số công cụ khác. Dưới đây là một hướng dẫn cơ bản.

Bước 1: Cài đặt môi trường phát triển React Native

1. Cài đặt Node.js: https://nodejs.org/
2. Cài đặt Watchman (lựa chọn, nhưng khuyến khích): https://facebook.github.io/watchman/docs/install
3. Cài đặt React Native CLI:

   npm install -g react-native-cli

1. Cài đặt Xcode (cho macOS) hoặc Android Studio (cho nhà phát triển Android): https://reactnative.dev/docs/environment-setup

Bước 2: Tạo một ứng dụng React Native mới

npx react-native init TodoApp
cd TodoApp

Bước 3: Cài đặt thư viện quản lý trạng thái (state management)

npm install @react-native-community/async-storage

Bước 4: Tạo các components và màn hình

Tạo một component Task.js để hiển thị mỗi công việc trong danh sách.

   // Task.js
   import React from 'react';
   import { View, Text, StyleSheet } from 'react-native';

   const Task = ({ text }) => {
     return (
       <View style={styles.task}>
         <Text>{text}</Text>
       </View>
     );
   };

   const styles = StyleSheet.create({
     task: {
       backgroundColor: '#FFF',
       padding: 15,
       borderRadius: 10,
       marginBottom: 10,
     },
   });

   export default Task;

Component này chỉ đơn giản là hiển thị một công việc trong một hộp có góc bo tròn.

Tạo một màn hình Home.js để hiển thị danh sách công việc và thêm công việc mới.

   // Home.js
   import React, { useState } from 'react';
   import { View, Text, TextInput, TouchableOpacity, StyleSheet, ScrollView } from 'react-native';
   import AsyncStorage from '@react-native-community/async-storage';
   import Task from './Task';

   const Home = () => {
     const [task, setTask] = useState('');
     const [taskList, setTaskList] = useState([]);

     const addTask = async () => {
       if (task) {
         const newTaskList = [...taskList, task];
         await AsyncStorage.setItem('taskList', JSON.stringify(newTaskList));
         setTaskList(newTaskList);
         setTask('');
       }
     };

     const loadTasks = async () => {
       const storedTasks = await AsyncStorage.getItem('taskList');
       if (storedTasks) {
         setTaskList(JSON.parse(storedTasks));
       }
     };

     useEffect(() => {
       loadTasks();
     }, []);

     return (
       <View style={styles.container}>
         <ScrollView>
           {taskList.map((item, index) => (
             <Task key={index} text={item} />
           ))}
         </ScrollView>
         <View style={styles.inputContainer}>
           <TextInput
             style={styles.input}
             placeholder="Thêm công việc mới..."
             value={task}
             onChangeText={(text) => setTask(text)}
           />
           <TouchableOpacity onPress={addTask}>
             <View style={styles.addButton}>
               <Text style={styles.addButtonText}>+</Text>
             </View>
           </TouchableOpacity>
         </View>
       </View>
     );
   };

   const styles = StyleSheet.create({
     container: {
       flex: 1,
       backgroundColor: '#E8EAED',
     },
     inputContainer: {
       flexDirection: 'row',
       justifyContent: 'space-around',
       alignItems: 'center',
       padding: 10,
       backgroundColor: '#FFF',
     },
     input: {
       flex: 1,
       paddingVertical: 15,
       paddingHorizontal: 10,
       backgroundColor: '#FFF',
       borderRadius: 10,
       marginRight: 10,
     },
     addButton: {
       width: 50,
       height: 50,
       backgroundColor: '#FFF',
       borderRadius: 25,
       justifyContent: 'center',
       alignItems: 'center',
     },
     addButtonText: {
       fontSize: 20,
     },
   });

   export default Home;

Trong màn hình này, useEffect được sử dụng để tải danh sách công việc từ bộ nhớ cục bộ (AsyncStorage) khi màn hình được tạo. Các công việc được hiển thị trong một ScrollView, và có một TextInput để nhập công việc mới. Khi người dùng nhấn vào nút thêm, công việc mới sẽ được thêm vào danh sách và lưu vào bộ nhớ.

Chỉnh sửa file App.js để sử dụng màn hình Home.

   // App.js
   import React from 'react';
   import Home from './Home';

   const App = () => {
     return <Home />;
   };

   export default App;

Bước 5: Chạy ứng dụng

npx react-native run-android
# hoặc
npx react-native run-ios

Ứng dụng Todo List của bạn sẽ xuất hiện trên máy ảo hoặc thiết bị thực để thử nghiệm. Lưu ý rằng quá trình cài đặt và chạy có thể mất một thời gian tùy thuộc vào môi trường phát triển của bạn.

4. Kết luận.

Ứng dụng Todo List cơ bản đã được tạo ra. Để hoàn thiện, tích hợp chức năng xóa và chỉnh sửa công việc, cải thiện giao diện, thêm tính năng nhắc nhở, và tìm kiếm công việc. Hãy liên tục thu thập phản hồi từ người dùng để làm cho ứng dụng ngày càng linh hoạt và hữu ích.

Để học lập trình React Native cơ bản đến nâng cao và làm ra các ứng dụng hữu ích, bạn hãy tham khảo khóa học lập trình React Native Online với đầy đủ tài liệu, bài tập, code mẫu tại đây: https://laptrinh-online.vn/course/lap-trinh-react-native

Liên hệ

Để được tư vấn lộ trình học chuẩn để học lấy nền tảng lập trình cơ bản / chuyển ngành / lên mức Lập trình viên chuyên nghiệp, đừng ngại inbox page fb.com/CodeFresherVN để Admin tư vấn lộ trình học với thời gian và chi phí phù hợp nhất cho bạn nhé!

Địa chỉ: Trung tâm CodeFresher – Tầng 5 tòa nhà Diamond Flower – số 1 Hoàng Đạo Thúy, Thanh Xuân, Hà Nội – SĐT: 081.318.8668