Hướng dẫn build react native ios

The publishing process is the same as any other native iOS app, with some additional considerations to take into account.

Nội dung chính Show

1. Enable App Transport Security
2. Configure release scheme
3. Build app for release
Bước 1: Cài đặt Homebrew
Bước 2: Cài đặt Node.JS và JDK
Bước 3: Cài đặt watchmen
Bước 3: Cài đặt React Native CLI
Bước 4: Cài đặt môi trường Android
Cài đặt Android Studio
Cài đặt Android SDK
Bước 5: Cài đặt môi trường iOS
Chạy thử một app
Kết luận

If you are using Expo then read the Expo Guide for Building Standalone Apps.

1. Enable App Transport Security

App Transport Security is a security feature introduced in iOS 9 that rejects all HTTP requests that are not sent over HTTPS. This can result in HTTP traffic being blocked, including the developer React Native server. ATS is disabled for localhost by default in React Native projects in order to make development easier.

You should re-enable ATS prior to building your app for production by removing the localhost entry from the NSExceptionDomains dictionary and setting NSAllowsArbitraryLoads to false in your Info.plist file in the ios/ folder. You can also re-enable ATS from within Xcode by opening your target properties under the Info pane and editing the App Transport Security Settings entry.

If your application needs to access HTTP resources on production, learn how to configure ATS on your project.

2. Configure release scheme

Building an app for distribution in the App Store requires using the Release scheme in Xcode. Apps built for Release will automatically disable the in-app Developer menu, which will prevent your users from inadvertently accessing the menu in production. It will also bundle the JavaScript locally, so you can put the app on a device and test whilst not connected to the computer.

To configure your app to be built using the Release scheme, go to Product → Scheme → Edit Scheme. Select the Run tab in the sidebar, then set the Build Configuration dropdown to Release.

Pro Tips

As your App Bundle grows in size, you may start to see a blank screen flash between your splash screen and the display of your root application view. If this is the case, you can add the following code to AppDelegate.m in order to keep your splash screen displayed during the transition.

// Place this code after "[self.window makeKeyAndVisible]" and before "return YES;"
UIStoryboard *sb = [UIStoryboard storyboardWithName:@"LaunchScreen" bundle:nil];
UIViewController *vc = [sb instantiateInitialViewController];
rootView.loadingView = vc.view;

The static bundle is built every time you target a physical device, even in Debug. If you want to save time, turn off bundle generation in Debug by adding the following to your shell script in the Xcode Build Phase Bundle React Native code and images:

if [ "${CONFIGURATION}" == "Debug" ]; then
export SKIP_BUNDLING=true
fi

3. Build app for release

You can now build your app for release by tapping ⌘B or selecting Product → Build from the menu bar. Once built for release, you'll be able to distribute the app to beta testers and submit the app to the App Store.

You can also use the React Native CLI to perform this operation using the option --configuration with the value Release (e.g. npx react-native run-ios --configuration Release).

React Native là một Cross-Platform dùng cho việc xây dựng các ứng dụng mobile. Chúng ta hoàn toàn có thể sử dụng và cài đặt trên nhiều hệ điều hành khác nhau. Lý do tôi chọn viết hướng dẫn cài đặt trên MacOS là vì nêu dùng trên MacOS chúng ta mới có thể vừa build-app trên cả hai nền tảng Android và iOS. Nếu cài đặt trên windows thì chúng ta phải sử dụng một iOS simulator.

Nội dung của bài

1 Bước 1: Cài đặt Homebrew
2 Bước 2: Cài đặt Node.JS và JDK
3 Bước 3: Cài đặt watchmen
4 Bước 3: Cài đặt React Native CLI
5 Bước 4: Cài đặt môi trường Android
- 5.1 Cài đặt Android Studio
- 5.2 Cài đặt Android SDK
6 Bước 5: Cài đặt môi trường iOS
7 Chạy thử một app
8 Kết luận

Bước 1: Cài đặt Homebrew

Homebrew là công cụ không thể thiếu với các lập trình viên sử dụng MacOS. Homebrew cho phép chúng ta có thể cài các phần mềm, thư viện trên nền tảng Linux, Unix không có sẵn trên MacOS.
Để cài đặt chúng ta sử dụng cú pháp:

/usr/bin/ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Bước 2: Cài đặt Node.JS và JDK

brew install node

Cài đặt JDK:

brew install --cask adoptopenjdk/openjdk/adoptopenjdk8

Bước 3: Cài đặt watchmen

Watchman là một công cụ của Facebook để theo dõi sự thay đổi trong file hệ thống. Nó được khuyến khích cài đặt để nâng cao hiệu suất công việc của bạn.

brew install watchman

Bước 3: Cài đặt React Native CLI

Để cài đặt React Native CLI chúng ta phải sử dụng NPM. NMP là viết tắt của Node package manager là một công cụ tạo và quản lý các thư viện lập trình Javascript cho Node.js. Chúng ta đã cài đặt NPM khi chúng ta cài đặt Node.JS.

npm install -g react-native-cli

Bước 4: Cài đặt môi trường Android

Cài đặt Android Studio

Các bạn tải phần mềm Android Studio tại đây. Khi cài đặt chúng ta chọn:

Android SDK
Android SDK Platform
Android Virtual Device ( Nếu bạn đã có thiết bị Android rồi thì không cần cài.)

Cài đặt Android SDK

Khi mở Android studio bạn vào setting như ảnh sau:

Chọn phiên bản Android SDK

Bước 5: Cài đặt môi trường iOS

Bạn tải Xcode từ Apple Store và tiến hành cài đặt.

Tiếp theo chúng ta cài đặt Xcode Command Line Tools: Mở Xcode vào Preferences chọn Locations tab, chọn Command Line Tools mới nhất.

Cài đặt máy ảo: Mở Xcode vào Preferences chọn Components tab, chọn máy ảo và iOS vesion theo mong muốn.

Chúng ta cũng cần cại đặt Package Manager. Có hai tool thông dụng là Cocoapods và Carthage nhưng mình chọn Cocoapods để hướng dẫn các bạn.

sudo gem install cocoapods

Chạy thử một app

Tạo MyApp bằng lệnh:

react-native init MyApp

Vào thư mực MyApp và chạy câu lệnh:

react-native run-android

Kết luận

Như vậy là chúng ta đã cài đặt xong React Native trên MacOS. Tiếp theo sau tôi sẽ hướng dẫn các bác các bước để xây dựng một ứng dụng. Hẹn gặp lại các bạn ở các bài tiếp theo.