การเริ่มต้นการแข่งขันตอบโต้กับ expo

Jan 20, 2026

วิธีการ

An image showing a React Native app running on a smartphone.

ตอบสนองพื้นเมือง เป็นแพลตฟอร์มที่ช่วยให้คุณสร้างแอพมือถือแบบดั้งเดิมโดยใช้ JavaScript ตามชื่อหมายถึงมันใช้ ทำปฏิกิริยา ดังนั้นการแต่งอินเตอร์เฟสมือถือจึงคล้ายกับการใช้งานจริงบนเว็บ แทนที่จะสร้างส่วนประกอบที่ใช้แท็ก HTML มันมีชุดของตัวเองที่ผูกกับส่วนประกอบ UI ดั้งเดิม

ตอบโต้พื้นเมืองอาจเป็นเรื่องยุ่งยากในการตั้งค่าโดยเฉพาะอย่างยิ่งเมื่อพูดถึงการแจ้งเตือนแบบพุช คุณต้องตั้งค่าใบรับรองและการดำน้ำเป็นวัตถุ -C สำหรับ iOS และ Java สำหรับ Android อย่างไรก็ตาม งานแสดงสินค้า กำจัดความต้องการนี้

สร้างเว็บไซต์มากกว่าแอพหรือไม่ คุณสามารถใช้ที่ดี สร้างเว็บไซต์ . และเพื่อรักษาเว็บไซต์ให้รับของคุณ เว็บโฮสติ้ง จับได้เห็นชัดตรงเผง.

30 เครื่องมือออกแบบเว็บเพื่อเพิ่มความเร็วเวิร์กโฟลว์ของคุณ

Expo หมายความว่าคุณสามารถสร้างแอพพลิเคชั่นตอบโต้และปรับใช้กับร้านค้าแอปโดยใช้ JS เท่านั้น นอกจากนี้ยังมี SDK ที่เข้าถึงฟังก์ชั่นพื้นเมืองเช่นการแจ้งเตือน, กล้อง, ผู้ติดต่อ, ที่ตั้งและอื่น ๆ นอกจากนี้ยังให้การเข้าถึงส่วนประกอบ UI บางส่วนที่ไม่รวมอยู่ในแกนพื้นเมืองที่ตอบสนอง แต่มักใช้เช่นไอคอนมุมมองที่เบลอและอื่น ๆ โดยไม่จำเป็นต้องเขียนบรรทัดของรหัสพื้นเมือง

Expo ยังสามารถสร้างแอปที่มีการส่งพร้อมโดยไม่จำเป็นต้องสร้างการใช้ Xcode หรือ Android Studio หากคุณไม่เคยใช้มาก่อนพวกเขาอาจเป็นสถานที่ที่น่ากลัวโดยเฉพาะอย่างยิ่งถ้าคุณเพิ่งเริ่มต้นด้วยการตอบโต้พื้นเมือง - หรือไม่มั่นใจโดยทั่วไปด้วย วิธีการทำแอป . แอพ (หรือโครงการ) สามารถเผยแพร่ไปยัง Expo แทนที่จะส่งไปยัง App Store ซึ่งช่วยให้ผู้ใช้ลองใช้โครงการผ่านไคลเอ็นต์ Expo มือถือ ไม่ต้องกังวลสิ่งนี้จะได้รับการคุ้มครองในภายหลัง!

คุณกำลังสร้างแอปของคุณกับทีมหรือไม่? บันทึกไฟล์ของคุณในที่เข้าถึงเชื่อถือได้ การจัดเก็บเมฆ .

01. ตั้งค่า Expo

การติดตั้ง Expo เป็นกระบวนการที่ตรงไปตรงมา มุ่งหน้าไปที่ เว็บไซต์ และดาวน์โหลด XDE ล่าสุดจากนั้นติดตั้งแอพมือถือบนโทรศัพท์หรือแท็บเล็ตของคุณ ไคลเอนต์มือถือช่วยให้สามารถรันแอปบนอุปกรณ์จริงผ่านแอปของพวกเขาโดยไม่ต้องใช้สิทธิ์การใช้งานของนักพัฒนาหรือการตั้งค่าใบรับรองล่วงหน้า

จากนั้นคุณสามารถเผยแพร่แอปไปยังบริการ Expo เพื่อให้ผู้ใช้สามารถเรียกใช้โครงการที่เสร็จสมบูรณ์ของคุณผ่านไคลเอนต์ Expo Mobile โดยไม่จำเป็นต้องผ่าน App Store และ Google Play Review Processes

Expo รองรับการสร้างแอพแบบสแตนด์อโลนที่สามารถเผยแพร่ไปยัง App Store หรือ Play Store ได้ด้วยตนเอง แต่คุณจะต้องมีบัญชีนักพัฒนาสำหรับแพลตฟอร์มที่คุณวางจำหน่าย โปรแกรมนักพัฒนาของ Apple ราคา£ 79 ต่อปีและ คอนโซลเล่นของ Google ค่าใช้จ่ายค่าธรรมเนียมเพียงครั้งเดียวของ $ 25 USD

02. สร้างแอปแรกของคุณ

An image showing the Expo XDE. — XDE นี้ให้ข้อมูลรายละเอียดแก่เราสำหรับโครงการ หน้าต่างด้านซ้ายเป็นแพ็คเกจพื้นเมืองตอบสนองและหน้าต่างด้านขวาจะแสดงบันทึกใด ๆ จากอุปกรณ์

มาทำธุรกิจกันเถอะและสร้างแอปแรกของเราด้วย Expo เปิด Expo XDE เลือกโครงการ & GT; โครงการใหม่และเลือกเทมเพลตเปล่า ติดตั้งการพึ่งพาทั้งหมดและเริ่มต้นการตอบโต้พื้นเมืองซึ่งรวมกลุ่มสินทรัพย์ทั้งหมด

จากที่นี่คุณสามารถเผยแพร่แอปแชร์แอปไปยังไคลเอ็นต์ Expo มือถือหรือรันแอปบนเครื่องจำลอง แอพนี้จะเกี่ยวข้องกับการสร้างการแจ้งเตือนแบบพุชดังนั้นคุณจะแบ่งปันไปยังไคลเอนต์มือถือ Expo เนื่องจากเครื่องจำลองไม่รองรับพวกเขา คลิกปุ่มแชร์เพื่อรับรหัส QR เพื่อสแกนหรือตัวเลือกเพื่อส่งลิงค์ผ่าน SMS หรืออีเมล สแกนรหัส QR กับไคลเอนต์ Expo สิ่งนี้จะเรียกใช้แอปผ่านไคลเอนต์ Expo และเปิดขึ้นเป็นหน้าจอด้วย: 'เปิด app.js เพื่อเริ่มทำงานกับแอปของคุณ!'

ด้วยแอปที่ทำงานให้เปิดโครงการในโปรแกรมแก้ไขโค้ดที่คุณชื่นชอบและเปิด app.js. ค้นหาข้อความด้านบนและเปลี่ยนเป็นคลาสสิก 'Hello World!' จากนั้นบันทึก คุณควรเห็นแอปโหลดซ้ำโดยอัตโนมัติและมีข้อความ 'Hello World!' ตอนนี้มองเห็นได้ มายากล!

ในขณะที่คุณกำลังพัฒนาเขย่าอุปกรณ์จะเปิดเผยเมนูนักพัฒนาซึ่งมีตัวเลือกที่เป็นประโยชน์สำหรับการดีบัก จากเมนูนี้คุณสามารถกลับไปที่บ้านเอ็กซ์โปได้ - มีประโยชน์ในการออกจากแอพหรือเปลี่ยนเป็นอื่น

03. เพิ่มการแจ้งเตือน

ตอนนี้คุณมีแอปพื้นฐานตั้งค่าและทำงานแล้วให้เพิ่มความสามารถในการส่งและรับการแจ้งเตือน โดยปกติจะต้องมีวัตถุประสงค์ - C และ Java รวมบริการของบุคคลที่สามเพื่อส่งการแจ้งเตือนและคุณจะต้องตั้งค่าใบรับรองสำหรับ iOS และสร้างคีย์สำหรับ Android

ก่อนอื่นคุณต้องนำเข้าการอนุญาตและการแจ้งเตือนจาก Expo และสร้างฟังก์ชั่นใหม่ในคลาส APP:

 นำเข้า {สิทธิ์การแจ้งเตือน} จาก 'Expo';
การส่งออกแอปคลาสเริ่มต้นที่ขยายออกไปอีกปฏิกิริยา {
  Async RegisterForPushnotifications () {
  }
}

ที่นี่คุณใช้คำหลัก Async เพื่อใช้ประโยชน์จากคุณสมบัติ As2017 Async / Await - ตอบโต้พื้นเมืองมี Babel ทำงานภายใต้เครื่องดูดควันเพื่อให้คุณสามารถใช้ประโยชน์จากความดี Javascript ใหม่ทั้งหมด ตอนนี้เรามาขอสิทธิ์การแจ้งเตือนและดึงโทเค็น Expo Push - เพื่อระบุอุปกรณ์ - เพื่อให้ Expo รู้ว่าจะส่งการแจ้งเตือนแบบพุช:

 Async registerpushnotifications () {
  Const ผลลัพธ์ = รอการอนุญาต .ASKASYNC (Permissions.Remote_notifications);
  ถ้า (prught.status! == 'ได้รับ') {
    กลับ;
  }
  Const Token = รอการแจ้งเตือน SEXPOPUSHTOKENASYNC ();
  console.log (โทเค็น);
}

ที่นี่คุณจะขออนุญาตการแจ้งเตือนโดยใช้วิธีการ PermissionsAkasync () การแจ้งเตือนจะแสดงบน iOS เนื่องจาก Android ช่วยให้การแจ้งเตือนเป็นค่าเริ่มต้นเท่านั้น อย่างไรก็ตามเรื่องนี้คุณยังคงต้องวิ่งผ่านตรรกะเดียวกันบน Android เนื่องจากเป็นไปได้ที่จะปิดการแจ้งเตือน

ถัดไปตรวจสอบการตอบสนอง หากไม่ได้รับการแจ้งเตือนคุณสามารถหยุดและกลับจากฟังก์ชั่นได้ หากได้รับการแจ้งเตือนคุณจะได้รับโทเค็น Push จาก Expo Service ในที่สุดคุณสามารถบันทึกโทเค็นเพื่อใช้ในภายหลังเพื่อทดสอบการแจ้งเตือนและสิ่งนี้จะเข้าสู่ระบบ Expo XDE

มันคุ้มค่าที่จะสังเกต ณ จุดนี้ - บน iOS - การแจ้งเตือนนี้สามารถเกิดขึ้นได้เพียงครั้งเดียวโดยการออกแบบ; ดังนั้นหากผู้ใช้ปฏิเสธการอนุญาตคุณอาจต้องการพิจารณาการเพิ่มการแจ้งเตือนหรือการแจ้งเตือนที่กำหนดเองก่อนที่จะส่งคืนฟังก์ชั่น ในการเปิดใช้งานการแจ้งเตือน ณ จุดนี้ผู้ใช้จะต้องไปที่การตั้งค่าแอป (ในกรณีของเราสิ่งนี้จะเป็น Expo) & GT; การแจ้งเตือนและเปิดใช้งานพวกเขาจากที่นั่น ด้วยเหตุนี้คุณจะต้องลบไคลเอ็นต์มือถือ Expo แล้วติดตั้งใหม่หากคุณต้องการทดสอบการแจ้งเตือนการอนุญาตบน iOS มากกว่าหนึ่งครั้ง

นอกจากนี้ Expo ยังให้วิธีการที่เรียกว่า Permissions.getasync () และใช้งานได้ในลักษณะเดียวกันกับ Permissions.Akasync () โดยไม่ต้องยิง IOS Alert สิ่งนี้อาจเป็นประโยชน์หากคุณต้องการตรวจสอบสถานะก่อนเพื่อสร้างการไหลที่กำหนดเองที่จะขอสิทธิ์เช่น หากก่อนหน้านี้การแจ้งเตือน iOS ได้รับการกระตุ้นก่อนหน้านี้ (จำไว้ว่ามันสามารถยิงได้เพียงครั้งเดียวต่อการติดตั้งแอปเท่านั้น), Permissions.askasync () จะส่งคืนข้อมูลเดียวกันกับสิทธิ์การใช้งาน GetAsync () ดังนั้นในกรณีการใช้งานของเราเราไม่ต้องการ วิธีใช้ Permissions.getasync ()

จากนั้นคุณต้องเรียกใช้ฟังก์ชันนี้ในวิธีการวงจรชีวิตของ ComponentDidMount เพื่อให้ทำงานบนแอปเปิดตัว:

 componentdidmount () {
  สิ่งนี้. registerpushnotifications ();
}

ต่อไปหากคุณยอมรับการอนุญาตการแจ้งเตือนแอปของคุณจะสามารถรับการแจ้งเตือนท้องถิ่นและระยะไกล การแจ้งเตือนท้องถิ่นจะถูกตั้งค่าและส่งผ่านอุปกรณ์โดยตรงไปยังแอปและไม่ต้องเชื่อมต่ออินเทอร์เน็ต การแจ้งเตือนระยะไกลมาจากเซิร์ฟเวอร์และส่งการแจ้งเตือนผ่านระบบแจ้งเตือน Apple Push (APNS) หรือบริการ Google Cloud Messaging (GCM) กระบวนการนี้จะต้องมีการเข้าถึงการเชื่อมต่ออินเทอร์เน็ตเพื่อรับ

Expo มีบริการส่งการแจ้งเตือนที่ https://exp.host/--/api/v2/push/send; สิ่งที่คุณต้องทำคือส่งข้อมูลบางอย่างไปที่มัน สิ่งนี้จะดูเล็กน้อยชอบสิ่งต่อไปนี้:

 {
  // โทเค็นผลักดัน
  "ถึง": & lt; โทเค็นจากแอป & GT;
  // ชื่อการแจ้งเตือน
  "ชื่อ": "ชื่อการแจ้งเตือน",
  // การแจ้งเตือนร่างกาย
  "ร่างกาย": "ร่างกายการแจ้งเตือน"
  // ส่งผ่านข้อมูลเป็นวัตถุสามารถใช้งานได้เมื่อจัดการการแจ้งเตือน
  "ข้อมูล": {"ค่า": "Hello World!" }
}

A newly created React Native app showing a message with the words 'Hello world!' — ชุดเครื่องมือ Expo ทำให้การส่งและรับการแจ้งเตือนแบบพุชได้อย่างง่ายดาย

ก่อนที่เราจะทดสอบการแจ้งเตือนเราจะกำหนดค่าแอปของเราเพื่อจัดการการแจ้งเตือนหากเปิดแอป โดยการออกแบบ iOS และ Android ไม่ได้แสดงการแจ้งเตือนเมื่อเปิดแอป นอกจากนี้คุณยังสามารถจัดการข้อมูลใด ๆ ที่ส่งในข้อความ Push ที่นี่ในกรณีที่เราต้องดำเนินการกับมัน มาสร้างฟังก์ชั่นใหม่เพื่อจัดการกับคุณสมบัตินี้และแจ้งเตือนคุณสมบัติข้อมูล:

 handlenotification (การแจ้งเตือน) {
  แจ้งเตือน (การแจ้งเตือน. Data.Value);
}

จากนั้นในวิธีการวงจรชีวิตของเราส่วนประกอบของเราคุณต้องตั้งค่าผู้ฟังซึ่งเรียกตัวจัดการการแจ้งเตือนที่เราเพิ่งสร้างขึ้น:

 componentdidmount () {
  สิ่งนี้. registerpushnotifications ();
  การแจ้งเตือนผู้ใช้ (นี้ .handlenotification);
}

ตอนนี้คุณตั้งค่าแล้ว มาส่งการแจ้งเตือนแบบพุชด้วยคำขอขด:

 curl \
  -x โพสต์ \
  -h "ประเภทเนื้อหา: แอปพลิเคชัน / JSON" \
  -d '{
    "ถึง": "& lt; token & gt;",
    "ชื่อ": "ชื่อการแจ้งเตือน",
    "ร่างกาย": "ร่างกายการแจ้งเตือน"
    "ข้อมูล": {"ค่า": "Hello World!" }
  } '\
  https://exp.host/--/api/v2/push/sendency106]
  
   คุณสามารถคว้าคำสั่ง curl นี้
   
    ที่นี่
   
   . หากคุณไม่คุ้นเคยกับ Curl คุณสามารถส่งคำขอโดยใช้สิ่งที่ชอบ
   
    บุรุษไปรษณีย์
   
   ซึ่งใช้ GUI สำหรับการส่งคำขอ
  
  
   เมื่อคำขอส่งแล้วคุณควรเห็นการแจ้งเตือนผ่านมา ไม่มีข้อ จำกัด ในการใช้บริการ Expo Push ในสถานการณ์จริงในโลกนี้ได้รับการสนับสนุนให้ใช้แบทช์ API โดยการส่งการแจ้งเตือนแบบพุชในชุด 100 เพื่อส่งออกเพื่อประสิทธิภาพ:
  
   [
  {// การแจ้งเตือนวัตถุดังกล่าวข้างต้น}
  {// วัตถุแจ้งเตือนอื่น}
] 
  
   04. เผยแพร่ด้วย Expo
  
  
   
    
     
      
       
       
       
      
     
    
   
   
    
     การรันแอปบนอุปกรณ์เป็นประสบการณ์ที่ไม่ยุ่งยาก เพียงสแกนรหัส QR ด้วยแอป Expo และโหลดทันที
    
   
  
  
   ดังนั้นตอนนี้เรามีแอป Native React Native ใหม่ที่แวววาว (แม้ว่ามันจะไม่ทำอะไรมาก แต่!) เราจะให้คนอื่นใช้มันได้อย่างไรโดยไม่ต้องใช้งานจาก Expo XDE? วิธีที่ง่ายที่สุดคือการคลิกเผยแพร่จาก XDE สิ่งนี้จะเผยแพร่โครงการไปยัง Expo และลิงค์จะปรากฏในโปรไฟล์ของคุณซึ่งคุณสามารถค้นหาได้ที่ https://expo.io/@< ;username>
  
  
   เมื่อคุณเยี่ยมชมลิงค์โครงการที่เผยแพร่จะมีรหัส QR ในการสแกน (อยู่ในตัวเลือกเดียวกันกับ XDE) กับไคลเอนต์มือถือ Expo เช่นเดียวกับในระหว่างการพัฒนา หากเราต้องการอัปเดตแอปสิ่งที่เราต้องทำคือการเผยแพร่ซ้ำและการเปลี่ยนแปลงจะสามารถใช้ได้กับผู้ใช้เมื่อรันแอปอีกครั้ง
  
  
   
    บทความนี้ได้รับการตีพิมพ์ครั้งแรกในฉบับที่ 297 ของ NET นิตยสารที่ขายดีที่สุดในโลกสำหรับนักออกแบบเว็บไซต์และนักพัฒนา
   
   
    
     สมัครสมาชิก NET ที่นี่
    
   
   
    .
   
  
  
   ต้องการเรียนรู้วิธีเพิ่มเติมที่คุณสามารถตอบสนองต่อ?
  
  
   
    
     
      
       
        
        
        
       
      
     
    
    
     
      Kristijan Ristovski กำลังให้การประชุมเชิงปฏิบัติการของเขาเรียนรู้วิธีคิดในการทำปฏิกิริยาในการสร้างลอนดอนตั้งแต่วันที่ 19-21 กันยายน 2561
     
    
   
  
  
   
    หากคุณสนใจที่จะเรียนรู้เพิ่มเติมเกี่ยวกับการตอบสนองตรวจสอบให้แน่ใจว่าคุณได้รับตั๋วของคุณเพื่อ
   
   
    
     สร้างลอนดอนตั้งแต่วันที่ 19-21 กันยายน 2561
    
   
   
    . หลังจากก่อตั้ง Academy React เพื่อสอนตอบโต้ทั่วโลกและเปิดตัว
   
   
    
     sizzy.co
    
   
   
    และ
   
   
    
     ok-google.io
    
   
   
    Kristijan Ristovski จะส่งมอบการประชุมเชิงปฏิบัติการของเขา - เรียนรู้วิธีคิดในการตอบสนองซึ่งเขาจะสำรวจการตอบสนองที่ดีที่สุดและสอนวิธีแก้ปัญหาที่แท้จริงที่คุณอาจพบในกระบวนการสร้างแอป
   
  
  
   
    สร้างลอนดอนเกิดขึ้นตั้งแต่วันที่ 19-21 กันยายน 2561
   
   
    
     รับตั๋วของคุณตอนนี้
    
   
   
    .
   
  
  
   
    บทความที่เกี่ยวข้อง:
   
  
  
   
    
     เอาหัวของคุณไปรอบ ๆ ปฏิกิริยากับปัจจัยทั้งห้านี้
    
   
   
    
     10 ผู้เชี่ยวชาญ Reactjs เคล็ดลับที่คุณต้องรู้วันนี้
    
   
   
    
     สร้างแอพมือถือที่มีพื้นเมืองตอบโต้

การเริ่มต้นการแข่งขันตอบโต้กับ expo

01. ตั้งค่า Expo

02. สร้างแอปแรกของคุณ

03. เพิ่มการแจ้งเตือน

04. เผยแพร่ด้วย Expo

ต้องการเรียนรู้วิธีเพิ่มเติมที่คุณสามารถตอบสนองต่อ?

วิธีการ - บทความยอดนิยม

วิธีใช้ทำปฏิกิริยาสปริงเพื่อสร้างส่วนประกอบเคลื่อนไหว

วิธีปรับขนาดภาพใน Photoshop

ทีละขั้นตอน: วิธีการเลียนแบบสีน้ำมันใน Corel Painter

Speed Sculpt Creature ใน ZBrush

4 เคล็ดลับการเพิ่มประสิทธิภาพภาพที่สำคัญ

สร้างโลโก้ใน Illustrator

ใช้อนุภาคเพื่อสร้างสาด 3 มิติ

วิธีเพิ่มข้อมูลในการออกแบบร่างของคุณ

หมวดหมู่