Cách xử lý các lỗi và cảnh báo thường gặp trong lập trình React Native

1. Cảnh báo propTypes phải được định nghĩa dưới dạng static property

Trong các phiên bản React Native sử dụng cú pháp ES6, bạn thường gặp cảnh báo yêu cầu di chuyển propTypes từ instance property sang static property. Nguyên nhân là do ES6 Class không hỗ trợ định nghĩa trực tiếp các thuộc tính lớp (class properties) bên trong thân lớp như cách createClass cũ thường làm.

Cách khắc phục: Di chuyển phần định nghĩa propTypes ra phía ngoài class hoặc sử dụng từ khóa static bên trong class.

// Cách 1: Định nghĩa bên ngoài class
class NavigationBar extends Component {
  render() {
    return <View>{/* UI content */}</View>;
  }
}

NavigationBar.propTypes = {
  title: PropTypes.string,
  onPress: PropTypes.func
};

// Cách 2: Sử dụng từ khóa static
class NavigationBar extends Component {
  static propTypes = {
    title: PropTypes.string,
    onPress: PropTypes.func
  };
  
  render() {
    return <View>{/* UI content */}</View>;
  }
}

2. Cảnh báo thiếu thuộc tính "key" duy nhất cho các phần tử trong mảng

Khi thực hiện duyệt mảng để render danh sách các component (như dùng hàm map), React yêu cầu mỗi phần tử con phải có một thuộc tính key duy nhất.

Nguyên nhân: Thuộc tính này hỗ trợ thuật toán Diffing của Virtual DOM. Khi dữ liệu thay đổi, React dựa vào key để xác định phần tử nào đã được thêm, sửa hoặc xóa, từ đó tối ưu hóa hiệu năng render thay vì phải vẽ lại toàn bộ danh sách.

const userList = data.map((user) => (
  <UserItem 
    key={user.unique_id} 
    name={user.userName} 
  />
));

3. Lỗi INSTALL_FAILED_UPDATE_INCOMPATIBLE khi cài đặt ứng dụng Android

Lỗi này xảy ra khi bạn cố gắng cài đặt một tệp APK lên thiết bị hoặc máy ảo đã tồn tại một phiên bản khác của ứng dụng đó (có thể khác về chữ ký số - signature hoặc cấu trúc build).

Cách khắc phục: Thực hiện gỡ cài đặt hoàn toàn ứng dụng cũ thông qua ADB trước khi chạy lại lệnh cài đặt mới.

adb uninstall com.your.package.name

4. Lỗi "Undefined is not an object" khi truy cập React.PropTypes

Kể từ phiên bản React 15.5, PropTypes đã được tách ra khỏi thư viện React chính và chuyển vào một gói độc lập để giảm kích thước bundle.

Cách khắc phục: Cài đặt thư viện prop-types và thay đổi cách import.

// Thay đổi từ:
import React, { Component, PropTypes } from 'react';

// Thành:
import React, { Component } from 'react';
import PropTypes from 'prop-types';

5. Lỗi Could not resolve all files khi thực thi run-android

Lỗi này phát sinh khi Gradle không thể tải về các dependency cần thiết từ kho lưu trữ (thường là JCenter hoặc Maven) do vấn đề đường truyền hoặc cấu hình URL không chính xác.

Cách khắc phục: Truy cập vào tệp android/build.gradle và cấu hình lại URL cụ thể cho JCenter.

allprojects {
    repositories {
        google()
        jcenter { 
            url "https://jcenter.bintray.com/" 
        }
        maven { url 'https://www.jitpack.io' }
    }
}

6. Lỗi Unable to find module for EventDispatcher

Đây là một lỗi khá mơ hồ thường xuất hiện khi tiến trình gỡ lỗi (Remote JS Debugging) bị mất đồng bộ hoặc gặp xung đột trong quá trình hot reload.

Cách khắc phục:

  1. Tắt chế độ Remote JS Debugging trên thiết bị/máy ảo.
  2. Thực hiện Reload lại ứng dụng.
  3. Nếu lỗi vẫn tồn tại, hãy xóa thư mục node_modules và cài đặt lại dependency.

Thẻ: react-native Android JavaScript Gradle react-navigation

Đăng vào ngày 23 tháng 7 lúc 00:46