React Native: Phát Triển Ứng Dụng Đa Nền Tảng Bằng JavaScript

React Native cho phép xây dựng ứng dụng iOS và Android từ một codebase JavaScript duy nhất. Thay vì viết hai ứng dụng riêng biệt bằng Swift/Kotlin, lập trình viên dùng React Native để chia sẻ logic và giao diện. Hướng dẫn này giới thiệu kiến trúc, cách bắt đầu, và các best practice cho dự án React Native mới.

React Native Là Gì?

React Native là framework do Meta phát triển, sử dụng React và native components thay vì WebView. Ứng dụng React Native render thành native UI components (UIKit trên iOS, Android View trên Android), không phải HTML trong browser. Tìm hiểu thêm trên trang chính thức React Native.

Sự khác biệt chính với React web: React DOM render HTML, React Native render native widgets. Cả hai dùng cùng mô hình component, state, và hooks.

Kiến Trúc React Native

Kiến trúc mới (Fabric + TurboModules) cải thiện hiệu suất đáng kể so với bridge cũ:

Fabric Renderer: Đẩy UI rendering lên thread chính, tránh bridge overhead gây trễ
TurboModules: Lazy-load native modules, giảm thời gian khởi động ứng dụng
JSI (JavaScript Interface): Cho JavaScript gọi native trực tiếp, đồng bộ thay vì async qua bridge
Codegen: Tạo code native từ TypeScript, giảm runtime overhead

Kiến trúc cũ dùng bridge JavaScript ↔ Native qua JSON serialization, chậm cho truyền dữ liệu lớn. Kiến trúc mới loại bỏ bottleneck này.

Bắt Đầu Dự Án Mới

Cài đặt và tạo project React Native:

npx react-native@latest init MyApp
cd MyApp
npx react-native run-android
npx react-native run-ios

Đây là cách tiếp cận bare React Native, toàn quyền kiểm soát native code. Đối với người muốn nhanh hơn, Expo là lớp bao bọc tuyệt vời:

npx create-expo-app@latest MyApp
cd MyApp
npx expo start
# Scan QR code trên app Expo Go để xem trên điện thoại

Expo cung cấp quản lý dependencies, push notifications, camera, bản đồ, và nhiều API khác không cần cấu hình native. Khi cần custom native module, dùng npx expo prebuild để tạo project native.

Development Workflow

React Native có hai chế độ phát triển:

Hot Reload: Cập nhật code ngay lập tức khi save, giữ trạng thái app
Live Reload: Restart toàn bộ app khi code thay đổi
Debug: Dùng Flipper hoặc React DevTools để inspect component tree, state, network

Components Và Style

Component cơ bản trong React Native khác với React web. Không có div, span, hay CSS file:

View thay div — container linh hoạt
Text thay span — hiển thị văn bản
ScrollView thay <div scrollable> — scroll view
FlatList thay <ul> cho danh sách hiệu suất cao
TouchableOpacity/Pressable thay <button>

Style dùng StyleSheet.create với flexbox mặc định (column direction):

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

const MyComponent = () => (
  <View style={styles.container}>
    <Text style={styles.title}>Xin chào React Native</Text>
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333',
  },
});

Navigation

Navigation là bắt buộc cho mọi app đa màn hình. React Navigation là thư viện phổ biến nhất với stack, tab, drawer navigator:

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} options={{ title: 'Trang chủ' }} />
        <Stack.Screen name="Details" component={DetailsScreen} options={{ title: 'Chi tiết' }} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Best Practice

Dùng TypeScript: Typing giúp tránh lỗi runtime khó debug, đặc biệt khi native module có kiểu phức tạp
Tránh inline styles: Tạo StyleSheet riêng để React Native diff nhanh hơn, tái sử dụng dễ
Virtualize danh sách: Luôn dùng FlatList hoặc SectionList với keyExtractor, không dùng Map/forEach render
Memo hóa component con: Dùng React.memo, useMemo, useCallback tránh re-render không cần
Quản lý state: Context API cho state đơn giản, Zustand/Redux Toolkit cho state phức tạp
Test: Jest cho unit test, Detox hoặc Maestro cho E2E
Split nền tảng: Dùng .ios.js/.android.js cho code riêng từng platform khi cần

Hiệu Suật Và Debug

Công cụ debug hiệu quả:

Flipper: Debug native + JS trong một app
React DevTools: Kiểm tra component tree, state, props
console.log trong React Native hiển thị qua Metro, hoặc dùng alert() đơn giản
Hermes Engine: Engine JS mặc định, tối ưu cho mobile (nhỏ hơn, nhanh hơn)

Kết Luận

React Native đã trưởng thành đáng kể qua nhiều năm. Với kiến trúc mới (Fabric + TurboModules), performance gần native, và hệ sinh thái phong phú, đây là lựa chọn mạnh cho startup muốn ra mắt cả iOS và Android nhanh chóng. Bắt đầu với Expo để nhanh chóng, sau đó tùy native khi cần. Đầu tư TypeScript, FlatList, và proper state management từ đầu sẽ tiết kiệm thời gian refactor sau này.