React Native 101


#1

React Native น่าจะเป็น library ที่ไว้ใช้พัฒนา cross platform UI ที่ดีที่สุดในตอนนี้ละ ด้วยความที่มันไม่ได้ใช้ HTML element แล้วมี webview wrapper ครอบไว้เหมือนกับ PhoneGap แต่กลับเป็น render native element ของทั้ง iOS/Android

ใครรู้เรื่อง React อยู่แล้วก็ดูง่ายๆ แค่เปลี่ยน View ทั้งหลายเป็น element ของ React Native นอกนั้นก็เดิมๆ ประเด็นมันก็มีแค่พวก view นั่นแหละ มันมีอะไรบ้าง

อ่าน docs ไม่เท่าเห็นลองด้วยตา UIExplorer

git clone https://github.com/facebook/react-native.git
cd react-native
npm install

สำหรับ iOS ก็เข้า Xcode เปิด Examples/UIExplorer/UIExplorer.xcodeproj
สำหรับ Android ก็

cd react-native
./gradlew :Examples:UIExplorer:android:app:installDebug
./packager/packager.sh

ถ้าตามนี้ไม่ได้ก็คงจะมีการเปลี่ยนแปลงละ เข้าไปดูเองซะ facebook/react-native/…/Examples/UIExplorer


#2

สำหรับ Android + genymotion (personal use)

ปัญหา คือ จะเปิด debug console ไม่ได้ ก็เพราะมันเป็นแค่ personal use ดังนั้นถ้าเรายังไม่ได้จะทำ app เป็นอาชีพ ทำขำๆเล่นๆ ก็ยังไม่ต้องจ่ายเงินเค้า ก็ใช้วิธียาจกไป

$ adb logcat | grep ReactNative

ก็น่าจะเห็น log พอสมควร

building APK

การ export apk ก็ไม่ได้มีอะไรเท่าไหร่ แต่มันต้องสร้าง key ก่อน (จะใช้ keystore หรือ jks ตัวที่สร้างจาก eclipse/android studio ก็ทำเหมือนกันเลย)

ทำตาม link นี้ ไม่ยากๆ ประมาณนี้

  • สร้าง keystore (ใช้ใน play store แล้วห้ามเปลี่ยน ไม่งั้นก็จะใช้ชื่อ package เดิมไม่ได้อีกต่อไป)
    • copy ไปไว้ใน android/app
  • แก้ android/gradle.properties
  • แก้ android/app/build.gradle
  • cd android && ./gradlew assembleRelease
    • เอา app-release.apk ไปใช้ได้เลย