Một số lỗi thường gặp khi khởi tạo một project react native

1.SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable.

error1

Cách fix: Tạo một file local.properties trong thư mục android, tạo đường dẫn đến thư mục sdk trọng máy của bạn. Thường thì sẽ nằm trong thư mục này nếu bạn cài android sdk bằng brew.

sdk.dir=/usr/local/Cellar/android-sdk/24.3.4

error2

error3

2.Exception in thread “main” java.net.UnknownHostException: services.gradle.org

Add the following lines to android/gradle.properties (remmber to replace with your proxy address and port)

systemProp.http.proxyHost=127.0.0.1
systemProp.http.proxyPort=8118
systemProp.https.proxyHost=127.0.0.1
systemProp.https.proxyPort=8118

3.Requring unknow module “image!my-icon”‘ error when trying to include static image

Cách fix:

    • Trước tiên phải chắc chắn là bạn đã có hình trong thư mục sau android\app\src\main\res\
      Hình phải có trong tất cả các thư mục sau : drawable-hdpi, drawable-mdpi, drawable-xhdpi, drawable-xxhdpi. Nếu chắc chắn đã có hình trong các thư mục này rồi mà vẫn không chạy được thì làm tiếp cách tiếp theo
    • ios: run command
      $ node_modules/react-native/packager/packager.sh --assetRoots path/to/Images.xcassets
    • android: run command
      react-native start --assetRoots ./android/app/src/main/res/
    • Nếu sau khi chạy bước này không được thì tiếp tục làm như sau:
      Close all terminal windows, delete your node_modules folder, run npm cache clean and npm install
    • Nếu vẫn không được thì thử cách cuối cùng (độc ác nhất, chiêu cuối rồi đó, còn không được nữa thì bó cmn tay):
      Try cleaning packager cache too with rm -fr $TMPDIR/react-*

4. Unable to download js bundle in real device
Cách fix: run these command

react-native run-android # it loads in genymotion and fails with bundle error
react-native start > /dev/null 2>&1 & # from dsissitka
adb reverse tcp:8081 tcp:8081 # from dsissitka

Compile and deploy react native app

Disclaimer: The instructions are the collective efforts from a few places online.
Nothing here is my original. But I want to put them together in one place to save people from spending the same time as I did.

First off, bundle.
==================

1. cd to the project directory
2. Start the react-native packager if not started
3. Download the bundle to the asset folder:
curl “http://localhost:8081/index.android.bundle?platform=android” -o “android/app/src/main/assets/index.android.bundle”

(Credit: https://github.com/facebook/react-native/issues/2743#issuecomment-140697340)

Note: make sure there is assets folder under android/app/src/main beforehand, and check if there is any error in the packager terminal window after curl.

Secondly, compile release version.
==================================

1. cd to {YOUR_PROJECT}/android
2. ./gradlew assembleRelease

Thirdly, sign the apk.
======================

1. To generate keystore
keytool -genkey -v -keystore my-keystore.keystore -alias name_alias -keyalg RSA -validity 10000

2. To sign an apk
jarsigner -verbose -keystore alias_name

3. To zip align an apk
zipalign -f -v 4

(Credit: http://stackoverflow.com/questions/26828372/how-to-sign-a-modded-an-apk-on-a-mac-with-apktool)

Lastly, install apk to device.
==============================

1. connect your phone to computer
2. adb install {PATH_TO_APK}

Lập trình Mobile App với React Native

React native là gì ? 

React native là một framework cho phép các lập trình viên xây dựng các ứng dụng native mà chỉ sử dụng ngôn ngữ lập trình javascript. React native cho phép bạn xây dựng các ứng dụng trên android và ios chỉ với một ngôn ngữ thống nhất là javascript nhưng mang lại trải nghiệm native app thực sự. Không như các framework hybrid khác (viết một lần triển khai nhiều nơi), React native tập trung vào việc một lập trình viên làm việc hiệu quả trên môi trường đa nền tảng như thế nào.

“Học một lần, sử dụng nhiều nơi”.

Một lập trình viên có thể lập trình tốt cho cả hai nền tảng android và ios chỉ với một ngôn ngữ duy nhất là javascript. Nghe hay đấy chứ ! Nhiều bạn sẽ đặt câu hỏi là tại sao các framework hybrid chỉ cần viết một lần mà có thể triển khai nhiều nơi, nghe có vẻ tốt và tiết kiệm thời gian chi phí hơn nhiều so với React native. Nhưng chúng ta cần phải chú ý đến mặt hạn chế của các framework này tại thời điểm hiện tại. Hạn chế lớn nhất đó là về vấn đề về performance. So sánh giữa hai ứng dụng hybrid và native ( vd như android hay ios), chúng ta sẽ thấy ngay được sự khác biệt rất lớn giữa hai ứng dụng về performance.

Cách đây vài năm, các thiết bị di động chưa phát triển như bây giờ, các ứng dụng chủ yếu được viết trên nền tảng form và web. Sẽ không có gì phải bàn nếu chúng ta chỉ sử dụng web trên máy tính, vấn đề chỉ thực sự đáng nói tới khi chúng ta sử dụng web trên các thiết bị di động, trải nghiệm của người dùng sẽ thực sự bị hạn chế đi rất nhiều, đó là lý do các ứng dụng trên thiết bị di động lần lượt ra đời để mang lại trải nghiệm tốt hơn cho người dùng. Các lập trình viên android và ios lần lượt xuất hiện để phục vụ cho nhu cầu viết ứng dụng trên thiết bị di động ngày càng lớn. Nguồn nhân lực này khá khan hiếm, vì vậy họ được trả lương khá cao, khá là hấp dẫn. Vậy các lập trình viên web sẽ làm gì? Một số muốn học ngôn ngữ ios, một số muốn học android để tìm cách đổi đời, nâng lương, một số vẫn tiếp tục theo đuổi niềm đam mê với web của mình. Tất nhiên có nhiều framework hybrid ra đời ngay sau đó để phục vụ cho việc viết ứng dụng bằng ngôn ngữ web nhưng còn nhiều hạn chế như chúng ta đã đề cập ở trên.

React native ra đời vì lý do này, nó giúp cho các lập trình viên vốn đã quen thuộc với ngôn ngữ web, đặc biệt là javascript có thể viết được các ứng dụng trên android và ios với trải nghiệm native app thực sự. Vậy so với việc phải học một lúc hai ngôn ngữ android và ios, bạn chỉ cần bỏ ra một ít thời gian làm quen với react-native là bạn đã có thể viết được các ứng dụng một cách dễ dàng trên cả hai nền tảng. Rất “cool” phải không nào? “Học một lần, sử dụng nhiều nơi”.

Vậy còn chần chừ gì nữa, hãy bắt đầu ngay hôm nay với việc tìm hiểu và sử dụng react native để viết cho mình những ứng dụng mình thực sự yêu thích và quan trọng nhất là biết đâu bạn sẽ trở nên giàu có với việc viết app như Nguyễn Hà Đông thì sao. Thường xuyên lên react native để theo dõi các bài viết mới nhất và cùng nhau trao đổi về react native nhé.

Lý do react native ra đời ?

Để bắt đầu với React Native, Bạn cần biết một số kiến thức cơ bản về React, nếu bạn chưa có khái niệm nào về React thì bạn có thể đọc thêm tại đây

Bắt đầu với React.

Khoảng hai năm trước, React được facebook giới thiệu tới cộng đồng lập trình viên, từ thời điểm đó cho đến nay, React đã phát triển một cách nhanh chóng không chỉ trong nội bộ facebook mà còn cả cộng đồng bên ngoài. Hiện nay, rất nhiều dự án đã được xây dựng dựa trên React, tỷ lệ các lập trình viên chọn và sử dụng React ngày càng nhiều vì nó giúp tiết kiệm thời gian “chiến đấu” với framework và tập trung hơn vào sản phẩm của mình hơn.

React tập trung vào việc chia nhỏ ứng dụng ra thành nhiều thành phần nhỏ, mỗi thành phần thể hiện một view tương ứng. Những thành phần này có thể dễ dàng được sử dụng lại trong hệ thống, khi có yêu cầu thay đổi chúng ta không cần phải thay đổi toàn bộ hệ thống nữa mà thay vào đó chỉ cần thay đổi một phần nhỏ trong đó. Quan trọng hơn React đóng gói các thẻ DOM, API chỉ cần khai báo một lần, giúp tăng tính trừu tượng và đơn giản hóa mô hình lập trình. Xây dựng app với react giúp code của chúng ta sẽ dễ hình dung hơn, dễ đoán hơn. Tính dễ đoán này giúp chúng ta có thể tự tin sử dụng lại và ứng dụng đáng tin cậy hơn. Ngoài ra, xây dựng ứng dụng với react không những giúp ứng dụng có khả năng mở rộng mà còn giúp chúng ta dễ dàng mở rộng qui mô của nhóm hơn.

Với công nghệ web và react chúng ta có thể xây dựng rất nhiều ứng dụng tuyệt vời, Ví dụ như Facebook. Tuy nhiên web chỉ là một phần của câu chuyện dài. Với những hạn chế hiện tại của web, các ứng dụng android và ios đang dần dần lên ngôi, tuy nhiên không phải ai cũng có thể xây dựng được một ứng dụng android hay ios một cách dễ dàng, chúng ta sẽ tìm hiểu tại sao việc xây dựng một ứng dụng native lại khó khăn ngay sau đây.

Tại sao phát triển native app lại khó khăn

Có rất nhiều lý do khiến cho việc xây dựng một ứng dụng native trên thiết bị di động lại khó khăn hơn trên web. Khó khăn đầu tiên đó là việc sắp xếp các thành phần trên màn hình, chúng ta luôn luôn phải tính toán kích thước, vị trí của tất cả các view. Một phần khó khăn nhất là giai đoạn chuyển đổi sang mobile, thử nghĩ mà xem, tốc độ phát triển ứng dụng của lập trình viên sẽ giảm xuống như thế nào?

Để xây dựng website, khi thay đổi một đoạn code nào đó, chúng ta chỉ cần lưu file và reload lại trang web để xem kết quả. Tuy nhiên với native, chúng ta cần phải recompile sau mỗi lần thay đổi, ngay cả khi chúng ta chỉ muốn dịch text lên một vài pixel. Do đó, tốc độ hoàn thành công việc của các lập trình viên sẽ bị chậm lại, đặc biệt nếu codebase lớn, sẽ mất thời gian hơn khi re-complie. Xây dựng native app cũng làm cho việc kiểm thử các chức năng mới trở nên khó khăn hơn. Tại Facebook, khi deliver một version mới của website, chỉ mất có hai ngày để testing team có thể test và feedback lại kết quả ngay sau đó. Với mobile, thường phải mất tới một tuần hoặc một tháng để test và nhận feedback từ testing team. Như vậy ở facebook, thời gian phát triển một chức năng trên web luôn luôn nhanh hơn thời gian phát triển cùng chức năng đó trên mobile, vậy tại sao họ lại muốn chuyển đổi từ web sang app cho mất thời gian ?

Lý do rất đơn giản,  các ứng dụng native mang lại trải nghiệm tốt hơn cho người dùng.

Tại sao native là cần thiết

Mặc dù phát triển ứng dụng native tốn nhiều thời gian hơn, có rất nhiều lý do lý giải tại sao chúng ta có thể mang lại cho người dùng trải nghiệm trên mobile tốt hơn trên web. Điều đầu tiên, chúng ta có thể sử dụng các thành phần đặc biệt của platform như map, date pickers, switches và navigation stacks. Chúng ta cũng có thể phát triển lại các thành phần này trên web nhưng các nổ lực xây dựng lại của chúng ta không bao giờ có thể mang lại trải nghiệm native thực sự như trên mobile được, và chúng cũng không bao giờ được cập nhật một cách tự động với những thay đổi từ platform khi cần. Chúng ta cũng không có bất cứ thứ gì hoạt động y chang như native app được công nhận trên web, và chúng ta chưa có công cụ hoặc các phương pháp nào chính xác cần thiết để xây dựng một hệ thống chuẩn xác.

Trên web, chúng ta cũng không có một mô hình thread hoàn chỉnh, vì vậy chúng ta không thể làm việc song song trên nhiều thread. Chúng ta có thể cố gắng sử dụng web workers để thực thi một vài logic ứng dụng trên background nhưng chúng ta chưa thể thực thi tính toán phức tạp như image decoding hay đo lường văn bản hiệu quả trên thread chính của browser. Đây chính là thách thức lớn nhất đổi với việc xây dựng một ứng dụng web apps có performance tốt và responsive.

Những gì Facebook thực sư muốn đạt được đó là trải nghiệm của người dùng trên ứng dụng native, kết hợp với kinh nghiệm có sẵn của các lập trình viên khi xây dựng ứng dụng web bằng react. Họ đã thử một vài cách để đạt được điều này:

1.Sử dụng webviews:

Sử dụng WebViews để load ứng dựng. Facebook đã thử cách này vài năm trước, và lúc đầu họ thực sự nghĩ đó là một ý kiến tuyệt vời. Nhưng quá trình thực hiện đã không mang lại hiệu suất tốt và tính co giãn mà họ muốn. Cách này có ưu điểm là tận dụng lại được các lập trình viên có kinh nghiệm trên web để tiếp tục phát triển các ứng dụng của facebook trên android và ios. Nhưng không may là việc render đang sử dụng công nghệ web nên không thể mang lại trải nghiệm native thực sự cho người dùng.

2.Scripting native

3.Chuyển react sang native

Chuyển đổi react sang native là một ý tưởng tuyệt vời của facebook và sự thực họ đã xây dựng thành công trên ios. Họ tạo ra một component gọi là ComponenKit, với nó họ đã tận dụng lại được các lợi ích của react, đồng thời sử dụng được sức mạnh của môi trường native.

Tuy nhiên có một số hạn chế với cách tiếp cận này. Đầu tiên, chỉ hỗ trợ cho IOS, vì vậy nếu muốn xây dựng ứng dụng trên android, họ phải tạo ra bản build riêng và train cho các lập trình viên cách sử dụng component đó. Ngoài ra, họ không thể sử dụng lại bất kì các stuff nào mà họ đã xây dựng cho web bằng react như relay. Quan trọng nhất vẫn là nền tảng này chưa giúp họ giảm được thời gian phát triển ứng dụng, vẫn phải recompile sau mỗi lần thay đổi.

React Native ra đời

Cũng sử dụng javascript để phát triển nhưng sự khác biệt duy nhất trên môi trường mobile là thay vì react sử dụng trên browser và render ra divs và spans, trên react native, javascript được nhúng vào một instance của javascript core bên trong app và render tới platform cụ thể ở mức độ cao hơn.