Category: React Native

มีอะไรใหม่ใน React Native 0.76

โค้ชเอก Leave a comment

  1. React Native 0.76 มาพร้อมกับ New Architecture ที่เขียนใหม่ทั้งหมด โดย default
    ซึ่งมาพร้อมกับฟีเจอร์ของ React แบบ full support (เมื่อก่อนไม่ครบ) ไม่ว่าจะเป็น Suspense, useLayoutEffect, Transitions เป็นต้น
  2. มาพร้อมกับ React Native DevTools ใหม่ ช่วยให้การ Debug App ของเราดีขึ้นมากๆ
  3. ปรับปรุง Metro (JavaScript bundler) ใหม่ช่วยให้ทำงานเร็วขึ้น 15 เท่า
  4. เพิ่ม style props ให้กับ boxShadow และ filter ที่ดีขึ้น ให้ทำงานเหมือนกับเขียน web แม้มีข้อจำกัดบ้าง แต่ถ้าใครเขียนเว็บอยู่แล้วใช้ได้อย่างสบาย
  5. ขนาดของ App ที่ build android ลดลงถึง 20% และเวลาเริ่มต้น App เฉลี่ยลดลงประมาณ 8% อีกด้วย
  6. ปรับขั้นต่ำ iOS เป็น 15.1 และ Android SDK เป็นเวอร์ชัน 24 (Android 7)
  7. มี Native Module และ Native Component แบบใหม่ ทุกคนสามารถเขียน Module หรือ Component ใช้เอง หรือใช้ไลบรารีภายนอกที่มีประสิทธิภาพมากขึ้น เราสามารถเขียนเรียก native interface (Synchronous access) โดยไม่ต้องมี bridge อีกต่อไป ตัวอย่างโค้ด

// Sync response from Native Module
const value = nativeModule.getValue();

// value can be a reference to a native object
nativeModule.doSomething(value);

  1. New Architecture ที่ถูกเขียนใหม่หมด แน่นอนการเอา bridge ออกไปจะทำให้แอปที่เขียนมี startup ที่เร็วขึ้น การสื่อสารระหว่าง JavaScript กับ native runtime ที่ดีขึ้น ส่งผลให้การรายงาน error ที่ชัดเจนขึ้น การ debug ก็ดีขึ้นด้วยครับ
  2. แน่นอน Meta ได้นำ New Architecture นี้ไปใช้งานจริงบน production ไม่ว่าจะเป็นแอป Facebook , Instagram และผลิตภัณฑ์อื่นๆ อีกด้วย
  3. ณ ตอนที่เขียนนี้มีไลบรารีเจ้าดังๆ รองรับ New Architecture แล้วกว่า 950 ไลบรารี ดูได้จากเว็บแหล่งรวมไลบรารีของ React Native ที่นี่ https://reactnative.directory/
  4. Expo SDK (framework) เวอร์ชัน 52 ล่าสุด รองรับ React Native เวอร์ชัน 0.76 และ New Architecture นี้เรียบร้อยแล้ว!

สุดท้าย ไม่เกี่ยวสักเท่าไหร่แต่มีข่าวว่าพนักงาน full-time ของ Flutter ถูกเลิกจ้าง แม้ Google จะยืนยันว่าไม่ทิ้ง Flutter แต่ก็มีนักพัฒนาแยกออกมาทำโครงการ Flock (fork of Flutter) มารวมตัวกันสร้างเป็น Flutter+ อนาคตของ Flutter จะเป็นอย่างไรก็ต้องรอดูกันต่อไปนะครับ

เรียน React Native กับโค้ชเอก ดูที่นี่ครับ https://codingthailand.com/react_native_2024_live/

โค้ชเอก

มีอะไรใหม่ใน React Native เวอร์ชัน 0.60

โค้ชเอก Leave a comment

1. รองรับ AndroidX ซึ่งถือเป็นการเปลี่ยนแปลงครั้งใหญ่ของ React Native เลยครับ จะทำให้ Library ภายนอกที่เราใช้อยู่และยังไม่ได้เขียนรองรับ AndroidX จะไม่สามารถงานได้ และทำให้เกิด error ตอน build เพราะฉะนั้นก่อนอัปเกรดควรเช็คก่อนว่า Library ภายนอกที่เราใช้อยู่ migrated และรองรับ AndroidX แล้วหรือยัง ถ้ายังก็คงต้องรอสักพักให้ Library ต่างๆ อัปเดตก่อน หรือใครอยากจะลองแก้เองก็ได้

.
2. ในเวอร์ชันนี้ ต่อไปทุกคนไม่ต้องสั่ง react native link แล้วนะครับ ตัว CLI จะทำการ auto link ให้เลย สำหรับคนที่จะอัปเกรดมาเวอร์ชันนี้ก็แนะนำให้ react native unlink ก่อน ค่อยอัปเกรด ไม่งั้นเดี๋ยวจะซ้ำ และเกิด error ได้

.
3. มีการนำเอา NetInfo, WebView และ Geolocation ออกจาก Core หลักแล้วนะครับ ใคร import แบบเดิมอยู่ ก็ให้เปลี่ยนไปติดตั้งแยก และใช้ Repo ของตัวนั้นได้เลย แล้วค่อย import เข้ามาใช้งานตามปกติ

.
4. เพิ่มตัวช่วยในการอัปเกรดเวอร์ชันของ React Native (Upgrade Helper) สะดวกมา ดูได้ที่นี่ครับ => http://bit.ly/2Ss6nx2

.
5. เปลี่ยนหน้า Intro screen (หน้าแรกตอนติดตั้งครั้งแรก) ใหม่ (ตามรูป)

.
6. ใช้ React เวอร์ชัน 16.8.6 ล่าสุด

.
7. ตั้งแต่เวอร์ชัน 0.60.2 ขึ้นไป จะรองรับ Hermes ซึ่งเป็น open-source JavaScript engine จะทำให้ การรัน React Native ตอนเริ่มต้นเร็วขึ้น (start-up time) ใช้หน่วยความจำได้ดีขึ้น และ App ของเรามีขนาดเล็กลง! ใครสนใจอยากลองเปิดใช้งานตัวนี้ ดูได้ที่นี่ครับ => http://bit.ly/2NX3N3k

.
*ข้อแนะนำ หากใครอยากลองอัปเกรดเวอร์ชันนี้ย้ำอีกรอบอย่าลืม backup โปรเจคเดิมก่อนนะครับ และตรวจสอบการรองรับ AndroidX ของ Library เดิมก่อน อีกข้อคืออย่าลืม unlink ด้วยนะ

.
อ่านเพิ่มเติมได้ที่ => http://bit.ly/2XKVMDf

.
ลองดูครับ
โค้ชเอก

React Native อยากทำรายงานแบบ Charts

โค้ชเอก Leave a comment

สำหรับคนที่เขียน React Native อยากทำรายงานแบบ Charts แนะนำลองใช้ตัวนี้ได้นะครับ ค่อนข้างยืดหยุ่น และสามารถ custom สไตล์ต่างๆ ได้ดี

.
รายละเอียด: http://bit.ly/2IsBRQ5

.
จริงๆ ตัวนี้ก็มีเวอร์ชันสำหรับเว็บด้วยนะ สำหรับคนที่เขียน React ก็ลองดูได้เลยครับ

.
โค้ชเอก

แจกฟรี! E-Book “คู่มือติดตั้ง และใช้งาน React Native เบื้องต้น”

โค้ชเอก 1 Comment

เนื้อหาในเล่มนี้จะเน้นการเตรียมเครื่องมือ และการติดตั้งโปรแกรมต่างๆ แบบ step by step จนสามารถเริ่มเขียน React Native ได้ จุดประสงค์หลักๆ เพื่อให้ทุกคนสามารถเริ่มและต่อยอดศึกษา React Native ได้อย่างรวดเร็ว และประหยัดเวลาครับ

จากที่ได้ยินหลายคนจะมีปัญหาในการติดตั้ง React Native มากเลย บางคนใช้เวลา setup หลายชั่วโมง หรือบางคนหลายวันเลย ก็หวังว่าหนังสือเล่มนี้จะช่วยประหยัดเวลาตรงนี้ได้นะครับ

(หนังสือเป็น PDF จำนวน 35 หน้า A5)
ดูเนื้อหา และดาวน์โหลดหนังสือ ที่นี่ => http://bit.ly/2De8Zbj

 

โค้ชเอก

React Native เพิ่งออกเวอร์ชัน 0.57 มาครับ มาดูกันว่ามีอะไรใหม่ๆบ้าง!

โค้ชเอก Leave a comment

 

1. มีการเพิ่ม APIs ใหม่ เกี่ยวกับ accessibility ที่ใช้งานง่ายขึ้น ได้แก่ accessibilityRole และ accessibilityStates
แน่นอนใช้ได้ทั้ง Android และ iOS ซึ่งเมื่อก่อนต้องเขียนแยกกัน คือ accessibilityComponentType (Android) และ accessibilityTraits (iOS)
APIs นี้จะช่วยบอก Talkback หรือ Voiceover ว่าเป็น UI ประเภทใด และมีสถานะใด App ของเราต้องเป็น App ที่ทุกคนเข้าถึงได้!

 

2. สำหรับ iOS ตัว WebView component จะเปลี่ยนมาใช้ WKWebView ครับ (ตัวเก่าใช้ UIWebViews ซึ่ง apple จะยกเลิกแล้ว!)
ซึ่งการใช้ WKWebView จะทำให้การรัน JavaScript ได้เร็วขึ้นกว่าเดิม และใช้ประโยชน์จาก multi-process architecture อีกด้วย
การใช้งานคือเพิ่ม useWebKit prop มีค่าเป็น true ดังนี้

<WebView useWebKit={true} source={{url: ‘https://codingthailand.com’}} />

 

3. สำหรับ Android ก็จะรองรับ SDK 27, gradle 4.4 แล้ว แนะนำให้ใช้ Android Studio 3.1 ก่อน เพราะจะมีปัญหากับการ build อยู่ครับ

 

4. รองรับ Babel 7 stable!

 

5. อัปเดต Flow และ React เวอร์ชันใหม่ (16.5.*) แน่นอนทำให้รองรับ React Profiler (เป็น React DevTools plugin สำหรับวัดพวกประสิทธิภาพ และอื่นๆ)

 

6. ใครที่ใช้ component NavigatorIOS จะกำลังจะถูกยกเลิก และเอาออกในเวอร์ชัน 0.58 ครับ

 

7. รองรับ Node.js 8.3 ขึ้นไป

 

8. สำหรับ Android การแสดงรูปภาพด้วย Image หากไม่มี uri จะ return เป็นค่า null

 

สำหรับคนที่ใช้เวอร์ชันก่อนหน้านี้ อย่างเช่น 0.56 แนะนำให้อัปเกรดเลยนะครับ เพราะแก้ bug ไปเยอะพอสมควรเลย

ดูรายละเอียดอื่นๆ และอัปเกรดกันได้ที่ => http://bit.ly/2xp0iXM

 

React Native เพิ่งออกเวอร์ชันใหม่ 0.56 มานะครับ

โค้ชเอก Leave a comment

React Native เพิ่งออกเวอร์ชันใหม่ 0.56 มานะครับ เปลี่ยนแปลงหลายอย่างพอสมควรหลังจากไม่ได้อัปเดตมาตั้งแต่เดือนมีนาคม

ใครที่กำลังจะทำโปรเจคใหม่ ก็ถือเป็นโอกาสอันดีครับที่จะใช้ตัวนี้ แต่ก็อย่าลืมอ่าน Changelog กันด้วยนะครับ คร่าวๆก็สรุปได้ตามนี้

.
1. อัปเกรดมาใช้ Babel เวอร์ชัน 7

.
2. ต้องใช้ Node.js อย่างต่ำเป็นเวอร์ชัน 8 ครับ

.
3. ปรับเวอร์ชันอย่างต่ำเป็น iOS 9

.
4. ต้องใช้ Xcode เวอร์ชัน 9 เป็นอย่างต่ำ แนะนำเป็น Xcode 9.4 ขึ้นไป

.
5. สำหรับ Android ต้อง complied โดยใช้ Android 26 SDK ขึ้นไป (เดือนสิงหาคมนี้ ทุก app ที่ build เป็น Android ต้องใช้ Android 26 SDK แล้วนะ)

.
6. ถ้าใช้งาน WebView จะโหลดได้เฉพาะ URLs ที่เป็น https และ geolocation จะถูก disabled มาเลย (default)

.
7. เราสามารถใช้งานเครื่องหมาย ? (optional chaining operator) ได้แล้ว แน่นอนทำให้เราสามารถเขียนป้องกัน error ที่เกิดจาก property ที่มีค่าเป็น undefined หรือ null ได้ ยกตัวอย่างเช่น

let user = { name: ‘CodingThailand’ }
let age = user?.age //จะเห็นว่า user ไม่มี property ชื่อว่า age ปกติแล้วจะมี error ขึ้นมา แต่ถ้าเราใส่เครื่องหมาย ? ก็จะไม่มี error เกิดขึ้นนะครับ ลองเอาไปใช้ดู จะได้ไม่ต้องเขียนโค้ดเช็ค error ให้วุ่นวาย

.
8. รองรับการใช้งาน flexWrap: ‘wrap-reverse’ ใครใช้ flexbox อยู่น่าจะใช้เป็นนะ 

.
อื่นๆก็จะเป็นการ Fixed bugs ต่างๆ อ่านเพิ่มเติมได้ที่นี่ครับ http://bit.ly/2Ka0z9v