🚀 Thiết lập môi trường phát triển React Native (Expo Bare + TypeScript) trên macOS

Nếu bạn đang bắt đầu với React Native (Expo Bare + TypeScript) trên macOS, bạn sẽ cần một thiết lập hoàn chỉnh cho phát triển ứng dụng Android và iOS. Hướng dẫn này sẽ bao gồm mọi thứ từ việc cài đặt các yêu cầu đến việc chạy ứng dụng trên các trình giả lập.

👉 Repo tham khảo: rn-expo-typescript-bare-template

🔧 Thiết lập hệ thống

1. Cài đặt Homebrew

Homebrew là một trình quản lý gói phổ biến trên macOS. Bạn có thể cài đặt nó bằng lệnh sau:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

2. Cài đặt Node & NPM

Node.js và NPM là rất cần thiết cho phát triển React Native. Sử dụng Homebrew để cài đặt:

brew install node

3. Cài đặt Git

Git là công cụ quản lý mã nguồn phổ biến. Cài đặt Git bằng lệnh:

brew install git

Sau khi cài đặt, bạn cần thiết lập danh tính Git:
👉 Thiết lập tên người dùng và email cho Git.

4. Cài đặt Watchman

Watchman giúp theo dõi các thay đổi trong hệ thống tệp. Cài đặt bằng lệnh:

brew install watchman

5. Cài đặt Java JDK (17)

React Native yêu cầu Java JDK. Cài đặt JDK 17 với Homebrew:

brew install openjdk@17
sudo ln -sfn /opt/homebrew/opt/openjdk@17/libexec/openjdk.jdk /Library/Java/JavaVirtualMachines/openjdk-17.jdk

Sau đó, thêm vào file ~/.zshrc hoặc ~/.bashrc:

export JAVA_HOME=$(/usr/libexec/java_home -v17)
export PATH=$JAVA_HOME/bin:$PATH
source ~/.zshrc

6. Cài đặt CocoaPods (cho iOS)

CocoaPods là công cụ quản lý thư viện cho iOS. Cài đặt nó bằng lệnh:

brew install cocoapods

7. Cài đặt Expo CLI

Expo CLI giúp bạn quản lý các dự án React Native. Cài đặt bằng lệnh:

npm install -g expo-cli

8. Cài đặt VS Code

👉 Tải xuống VS Code từ trang chủ.

📱 Thiết lập Android & iOS

Android Studio

👉 Tải xuống Android Studio từ trang web chính thức.

• Android Studio: Trình phát triển chính cho Android.
• Hướng dẫn Android Studio: Hướng dẫn chi tiết để thiết lập.

1. Mở Android Studio.
2. Cài đặt SDKs & Emulator.
3. Cập nhật đường dẫn trong file local.properties bên trong thư mục /android:

sdk.dir=/Users/username/Library/Android/sdk

Xcode (cho iOS)

👉 Tải xuống Xcode từ App Store.

Nếu bạn duy trì nhiều phiên bản Xcode, hãy chuyển đổi giữa chúng:

sudo xcode-select -s /Applications/Xcode.app/Contents/Developer
sudo xcode-select -s ~/Downloads/Xcode.app/Contents/Developer

Mở file .xcworkspace trong Xcode để xây dựng ứng dụng cho iOS.

📂 Thiết lập dự án

1. Nhân bản dự án:

Sử dụng lệnh sau để clone dự án:

git clone <your-repo-url>
cd rn-expo-typescript-bare-template

2. Cài đặt các phụ thuộc:

Chạy lệnh sau để cài đặt:

npm install

3. Giải quyết vấn đề với react-native-snap-carousel

Nếu gặp vấn đề với react-native-snap-carousel, bạn cần nhập ViewPropTypes một cách thủ công:

import { ViewPropTypes } from 'deprecated-react-native-prop-types';

Cập nhật trong:

• react-native-snap-carousel/src/carousel
• pagination, paginationDot, parallaxImage

4. Thiết lập cho iOS:

Chạy các lệnh sau:

cd ios
pod install
cd ..

5. Chạy ứng dụng:

Sử dụng các lệnh sau để chạy ứng dụng:

npm run ios
npm run android

✅ Tổng kết

Bạn đã có một thiết lập hoàn chỉnh cho React Native (Expo Bare + TypeScript) trên macOS 🚀. Bài viết này đã đề cập đến Node, JDK, Android Studio, Xcode, Git, Expo CLI, Pods, VS Code và các công cụ phát triển bổ sung.

📌 Repo tham khảo: rn-expo-typescript-bare-template

✍️ Viết bởi Dainy Jose — Nhà phát triển ứng dụng di động chuyên về React Native và MERN stack.

💼 Kỹ năng & Công cụ:

Phát triển ứng dụng di động | MERN Stack | React Native | TypeScript | Redux | React.js | Node.js | MongoDB | MySQL | Express.js | REST API | JWT | Google Maps | Firebase | Jest | Agile | SDLC | Thanh toán | Git | Bitbucket | Jira

📬 Kết nối với tôi:

🔗 LinkedIn

💻 GitHub