การอัพเกรด React Native จาก 0.61.5 เป็น 0.62.3

การอัปเกรด React Native เป็นเวอร์ชันใหม่จะทำให้คุณสามารถเข้าถึง API มุมมอง เครื่องมือสำหรับนักพัฒนา และสินค้าอื่นๆ ได้มากขึ้น

การอัปเกรด React Native อาจเป็นความท้าทายอย่างมากสำหรับทุกคนที่ดูแลแอปพลิเคชันโดยใช้ไลบรารีของ Facebook แม้ว่าจะมีเนื้อหาและเอกสารจำนวนมากที่ช่วยในงานนี้ แต่ก็ยังทำการอัปเดตได้ยาก โดยเฉพาะในแอปที่มีการขึ้นต่อกันจำนวนมาก ไม่จำเป็นต้องพูดถึงปัญหาเก่าๆ ในสภาพแวดล้อม iOS โดยเฉพาะกับ xcode

บทความนี้มีจุดมุ่งหมายเพื่อช่วยทุกคนที่กำลังประสบกับสิ่งที่คล้ายกัน ในกรณีของฉัน ฉันต้องอัปเกรดจากเวอร์ชัน 0.61.5 เป็น 0.62.3 สาเหตุหลักมาจากการดีบักและทดสอบแอปที่สร้างขึ้นในเวอร์ชันต่ำกว่า/ต่ำกว่า 0.62.0. ทีมพัฒนาของเราเคยแก้ไขข้อบกพร่องด้วย Reactotron (https://github.com/infinitered/reactotron) แต่สำหรับปัญหาบางอย่าง เราต้องการเครื่องมือที่จะช่วยให้เราเจาะลึกลงไปอีก ซึ่งเป็นสิ่งที่มีรายละเอียดมากขึ้น

ในบทความนี้ ฉันจะแสดงวิธีการอัปเดตด้วยตนเอง (น่าเสียดายที่การอัปเดตอัตโนมัติทำให้ฉันทำงานแย่ลงเท่านั้น) แต่ฉันคิดว่าคุณสามารถตรวจสอบได้ว่าเหมาะกับกรณีของคุณหรือไม่ในเอกสารอย่างเป็นทางการของ react-native: https://reactnative.dev/docs/upgrading

ลิงก์อื่นที่มีประโยชน์จริงๆ คือตัวช่วยอัปเกรดแบบโต้ตอบ หากเวอร์ชันปัจจุบันและเวอร์ชันเป้าหมายแบบโต้ตอบดั้งเดิมของคุณแตกต่างจากของฉัน คุณควรตรวจสอบสิ่งนี้:

https://react-native-community.github.io/upgrade-helper/

ก่อนที่คุณจะอัพเกรด

ปลอดภัยดีกว่าขออภัย คุณควรตรวจสอบตัวติดตามปัญหา React Native เพื่อดูว่ามีปัญหาสำคัญใดๆ ในรีลีสใหม่ที่อาจส่งผลกระทบต่อคุณหรือไม่ คุณต้องตรวจสอบทุกไลบรารีที่ใช้งานอยู่ และให้แน่ใจว่าไลบรารีเหล่านั้นจะไม่รายงานปัญหาความเข้ากันได้กับเวอร์ชันเป้าหมาย

จากที่กล่าวมา เรามาเริ่มที่โค้ดกันดีกว่า

ขั้นตอนที่ 1: อัปเกรด react-native และที่เกี่ยวข้อง

ไปที่ package.json และแก้ไข:

{
  "dependencies": {
    "react": "16.11.0",
    "react-native": "0.62.3"
  },
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/runtime": "^7.9.2",
    "@react-native-community/eslint-config": "^0.0.3",
    "babel-jest": "^24.1.0",
    "eslint": "^6.5.1",
    "jest": "^24.9.0",
    "jest-styled-components": "^6.3.4",
    "metro-react-native-babel-preset": "^0.58.0",
    "react-test-renderer": "16.11.0"
  },
}

ต่อไป ให้รันการติดตั้ง npm หากคุณพบปัญหา ให้ลองลบโฟลเดอร์ node_modules แล้วรันอีกครั้ง

จากนั้นไปที่ .gitattributesและเพิ่ม:

# specific for windows script files 
*.bat text eol=crlf

ในไฟล์ .flowconfig:

• ในส่วน [libs] ให้แทนที่ node_modules/react-native/Libraries/react-native/react-native-interface.js ด้วย node_modules/react-native/interface.js
• ในส่วน [ตัวเลือก] ให้ลบบรรทัดที่ขึ้นต้นด้วย module.name_mapper='^react-native$' -> และแทนที่บรรทัดที่ขึ้นต้นด้วย module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif ด้วย: module.name_mapper='^@?[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> '<PROJECT_ROOT>/node_modules/react-native/Libraries/Image/RelativeImageStub'
• ในส่วน [version] ให้แทนที่ ^0.105.0 ด้วย ^0.113.0

ขั้นตอนที่ 2: หุ่นยนต์

ขั้นแรก เราต้องเปลี่ยนหมายเลขเวอร์ชัน gradle ใน android/gradle/wrapper/gradle-wrapper.propertiesแก้ไข distributionUrl เป็น:

distributionUrl=https\://services.gradle.org/distributions/gradle-6.0.1-all.zip

ตอนนี้ไปที่ android/gradlew และแทนที่เงื่อนไขจาก

if $cygwin ; then

to

if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then

ไปที่ android/app/build.gradle และ:

• เพิ่ม packagingOptions ภายในส่วน android{}

packagingOptions {
pickFirst "lib/armeabi-v7a/libc++_shared.so"
pickFirst "lib/arm64-v8a/libc++_shared.so"
pickFirst "lib/x86/libc++_shared.so"
pickFirst "lib/x86_64/libc++_shared.so"
}

• หากจำเป็น ให้ระบุการใช้งานการอ้างอิง swiperefreshlayout

implementation “androidx.swiperefreshlayout:swiperefreshlayout:1.0.0”

หลังจากนี้ ไปที่ android/app/src/main/AndroidManifest.xml

• แทนที่ android:configChanges=”keyboard|keyboardHidden|orientation|screenSize' ด้วย android:configChanges=”keyboard|keyboardHidden|orientation|screenSize|uiMode”
• เพิ่มบรรทัด android:launchMode=”singleTask”

ตอนนี้ไปที่ android/build.gradle:

• อัปเกรดเครื่องมือสร้าง Android ที่ปรับเปลี่ยนคลาสพาธ

classpath("com.android.tools.build:gradle:3.5.2")

ตอนนี้การตั้งค่า Android ของคุณพร้อมแล้ว!

ขั้นตอนที่ 3: iOs (พร้อม CocoaPods)

ขั้นแรก คุณต้องแก้ไข ios/Podfile และทำการเปลี่ยนแปลงเหล่านี้:

• แทนที่พ็อดชื่อ ReactCommon/jscallinvoker ด้วย ReactCommon/callinvoker
• หากคุณตั้งใจจะใช้ Flipper ในอนาคต ให้เพิ่ม :modular_headers => true ต่อท้ายบรรทัดโดยขึ้นต้นด้วย pod 'Yoga'
• หากคุณมีเป้าหมาย "การทดสอบ" (บรรทัดเช่น target 'YourAppNameTests' do) เมื่อแทนที่บรรทัด inherit! :search_paths ด้วย inherit! :complete
• แทนที่ แพลตฟอร์ม :ios, '9.0'ด้วย แพลตฟอร์ม :ios, '10.0'
• เพิ่มต้องการลิงก์อัตโนมัติ require_relative '../node_modules/react-native/scripts/autolink-ios'
• หากจำเป็น ให้เพิ่มการพึ่งพาพ็อด BVLinearGarident ด้วยบรรทัด พ็อด 'BVLinearGradient', :path =› '../node_modules/react-native-linear-gradient'

หลังจากนั้น ให้เข้าไปในโฟลเดอร์ ios และลบโฟลเดอร์ Podfile.lock และ Pods ด้วยคำสั่ง rm -r Podfile.lock && rm -rf Pods/ และ runpod install

หากคุณมีปัญหากับ xcode ให้ทำตามคำแนะนำนี้ใน https://github.com/react-native-community/upgrade-helper/issues/191 เพื่อตั้งค่า xcode สำหรับเวอร์ชัน react-native ใหม่

ในที่สุด แอปของคุณก็พร้อมที่จะทำงานในเวอร์ชันอัปเดตแล้ว!