ฉันกำลังทำงานกับแอป React Native และฉันกำลังพยายามตั้งค่าหน้าจอเรียกใช้แบบปรับแต่ง แต่ไม่สามารถทำได้

React Native สร้าง LaunchScreen.xib ตามค่าเริ่มต้นดังนั้นฉันจึงสร้าง LaunchImage ภายใน Images.xcassets:

ฉันได้อ่านว่าฉันได้แก้ไข "Launch Screen File" ภายใต้ "App Icons and Launch Images" ในตัวเลือกของฉัน:

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

ดังนั้นฉันจึงไม่รู้ว่าฉันต้องทำอะไรเพื่อตั้งค่าหน้าจอเปิดตัวในโครงการ React Native

ฉันจะขอบคุณถ้ามีใครสามารถช่วยฉันแก้ปัญหาเหล่านั้นได้

ขอบคุณล่วงหน้า.

ฉันสามารถแก้ปัญหาได้ด้วยความช่วยเหลือของเธรดนี้: Launch Image ไม่ปรากฏในแอปพลิเคชัน iOS (โดยใช้ Images.xcassets)

ดังนั้นฉันจะอธิบายอย่างละเอียดเผื่อว่าจะช่วยคนอื่นได้

ขั้นแรกคุณต้องสร้างภาพบางภาพ สิ่งที่ฉันใช้คือเทมเพลตนี้และหน้าเว็บที่มีตัวสร้างอัตโนมัติ: TiCons

เมื่อฉันดาวน์โหลดภาพของฉันฉันเอาภาพที่อยู่ในโฟลเดอร์ assets / iphone ฉันเอาเฉพาะภาพเหล่านั้น:

• Default@2x.png (640x960)
• ค่าเริ่มต้น-568h@2x.png (640x1136)
• ค่าเริ่มต้น --667h@2x.png (750x1334)
• Default-Portrait-736h@3x.png (1242x2208)
• ค่าเริ่มต้น -Landscape-736h@3x.png (2208x1242)

นอกจากนี้คุณต้องมีไฟล์Contents.jsonนี้ในโฟลเดอร์เดียวกันฉันได้มาจากเพื่อน:

{
  "images": [
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "Default-568h@2x.png",
      "minimum-system-version": "7.0",
      "orientation": "portrait",
      "scale": "2x",
      "subtype": "retina4"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "Default-667h@2x.png",
      "minimum-system-version": "8.0",
      "orientation": "portrait",
      "scale": "2x",
      "subtype": "667h"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "Default-Landscape-736h@3x.png",
      "minimum-system-version": "8.0",
      "orientation": "landscape",
      "scale": "3x",
      "subtype": "736h"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "Default-Portrait-736h@3x.png",
      "minimum-system-version": "8.0",
      "orientation": "portrait",
      "scale": "3x",
      "subtype": "736h"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "Default@2x.png",
      "minimum-system-version": "7.0",
      "orientation": "portrait",
      "scale": "2x"
    }
  ],
  "info": {
    "version": 1,
    "author": "xcode"
  }
}

ดังนั้น ณ จุดนี้ฉันจึงสร้างโฟลเดอร์ชื่อLaunchImage.launchimageภายในโฟลเดอร์Images.xcassetsในโครงการ React Native ของฉันและบันทึกภาพและไฟล์Contents.jsonไว้ข้างใน:

ประการที่สองคุณต้องเปิดโปรเจ็กต์ของคุณใน Xcode และในการตั้งค่า "ทั่วไป" ด้านล่าง " ไอคอนแอพและเปิดรูปภาพ " เราต้องปล่อยให้ตัวเลือก " เปิดไฟล์หน้าจอ " ว่างเปล่า (นอกจากนี้เรายังสามารถลบไฟล์LaunchScreen.xibภายในโครงการของเราได้ ) และคลิกใน " ใช้แคตตาล็อกเนื้อหา " หลังจากนั้น โมดอลจะเปิดขึ้นเราเลือกที่จะย้ายข้อมูลแคตตาล็อกรูปภาพ

ตอนนี้ในตัวเลือก" Launch Image Source " เราสามารถเลือกโฟลเดอร์ที่เราสร้างไว้ก่อนหน้าLaunchImage (อันที่มีรูปภาพของเรา):

เราเลือกสิ่งนี้แทนBrand Assetsและเราสามารถลบโฟลเดอร์Brand Assetsได้

ณ จุดนี้เราจะสามารถเรียกใช้แอปพลิเคชัน React Native ของเราด้วยอิมเมจเปิดตัวที่กำหนดเองของเรา:

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

อย่าลืมลบแอพออกจากโปรแกรมจำลอง จากนั้นทำความสะอาดโครงการของคุณ

ฉันได้ดูคำตอบเหล่านี้เป็นจำนวนมากใน SO ที่มีโซลูชันสำหรับวิธีสร้างหน้าจอเปิดตัวใหม่ ฉันหมายถึงลองคิดดูสักครู่

เมื่อเราสร้างโครงการที่ตอบสนองใหม่เราจะเห็นอะไรในหน้าจอเริ่มต้น?

> หน้าจอเริ่มต้นของ Facebook

นั่นทำให้ฉันคิดว่าพวกเขาทำได้อย่างไร?

พวกเขาสร้างไฟล์ LaunchScreen.xib

ฉันคิดว่ามันต้องมีเหตุผลสำหรับเรื่องนี้ ดังนั้นฉันจึงเข้าไปLaunchScreen.xibและทำการเปลี่ยนแปลงข้อความเริ่มต้น "React Native ... " หรือสิ่งที่เคยพูด ฉันเรียกใช้แอปอีกครั้งเพื่อดูว่าหน้าจอเปิดใช้งานสะท้อนการแก้ไขของฉัน

โซลูชันที่ 1 แก้ไขLaunchScreen.xibที่มีอยู่

โซลูชันที่ 2 สร้างของฉันเอง

ดังนั้นฉันจึงใช้เวลาพิมพ์คำตอบนี้นานกว่าการเรียนรู้วิธีสร้างคำตอบของตัวเอง Both of these solutions are compatible with all the devices.

ขั้นตอนที่ 1:

ลบ LaunchScreen.xib

ขั้นตอนที่ 2:

คลิกที่คลิกimages.xcassets ขวาในพื้นที่สีขาวคลิก**import**จากนั้นเลือกภาพที่คุณต้องการเพิ่ม

ขั้นตอนที่ 3:

คลิกขวาที่โฟลเดอร์รูทของโปรเจ็กต์และเพิ่มไฟล์ประเภทใหม่Launch Screenและตั้งชื่อตามที่คุณต้องการ

ขั้นตอนที่ 4

คลิกที่โครงการของคุณในการนำทางด้านซ้ายให้ไปที่Settings> และอยู่ภายใต้General App Icons and Launch Imagesตรวจสอบให้แน่ใจว่าLaunch Image Sourceว่างเปล่าและLaunch Screen Fileเป็นชื่อเดียวกับหน้าจอเริ่มต้นที่สร้างขึ้นใหม่

ขั้นตอนที่ 5

คลิกไฟล์ใหม่เอี่ยมที่คุณสร้างstep 2ลากImage Viewหรือแก้ไขว่าเคยถูกใจคุณแค่ไหน

เท่านี้ก็เสร็จแล้ว คุณไม่จำเป็นต้องทำความสะอาดโซลูชันเพียงสร้างใหม่

อัปเดต

generator-rn-toolboxเลิกใช้แล้ว ใช้react-native-makeแทน

คำตอบเก่า

ฉันขอแนะนำgenerator-rn-toolboxสำหรับการใช้หน้าจอเรียกใช้หรือไอคอนหลักโดยใช้บน react-native มันง่ายกว่าและใช้งานง่ายผ่าน cli เป็น react-native

• ไม่จำเป็นต้องเปิด XCode
• ไม่ต้องทำไฟล์ภาพจำนวนมากเพื่อความละเอียดต่างๆ
• ทุกเวลาเปลี่ยนหน้าจอเริ่มต้นโดยใช้หนึ่งบรรทัดยกย่อง

ข้อกำหนด

• โหนด> = 6
• ภาพสี่เหลี่ยมจัตุรัสหนึ่งไฟล์หรือไฟล์ psd ที่มีขนาดความละเอียดมากกว่า2208x2208 px สำหรับหน้าจอเริ่มต้น (หน้าจอเริ่มต้น)
• คิดบวก;)

ติดตั้ง

1. ติดตั้ง generator-rn-toolbox และ yo
2. npm install -g yo generator-rn-toolbox
3. ติดตั้ง imagemagick brew install imagemagick

4. ใช้หน้าจอเริ่มต้นบน iOS

   yo rn-toolbox:assets --splash YOURIMAGE.png --ios

   หรือ Android

   yo rn-toolbox:assets --splash YOURIMAGE.png --android

นั่นคือทั้งหมด :)

ที่มา

เพิ่งผ่านสิ่งนี้และทำการรักษา บล็อกถนนเดียวที่ฉันค้นพบคือไม่ได้ล้างเนื้อหาจำลอง หากคุณพบว่าหน้าจอเปิดตัวใหม่ของคุณใช้งานไม่ได้คุณต้องเปิดการจำลองและไปที่สิ่งต่อไปนี้:

Simulator> รีเซ็ตเนื้อหาและการตั้งค่า

จะต้องมีการแคชแบบไม่ยอมใครง่ายๆเกิดขึ้นภายในโปรแกรมจำลองนั้น แต่เมื่อเสร็จแล้วให้รันใหม่แล้วคุณจะเห็นแอป ตรวจสอบให้แน่ใจว่าคุณทำสิ่งนี้กับทั้งเครื่องจำลอง xcode และเครื่องจำลองการตอบสนองดั้งเดิม!

ตรวจสอบให้แน่ใจว่าการเลือก "Launch Screen File" ว่างเปล่า:

ตามลิงค์นี้:

หากคุณต้องการเพิ่มหน้าจอเริ่มต้นในแอปพลิเคชัน React Native ของฉันทำตามขั้นตอนผลลัพธ์จะเป็นของคุณทั้งหมด

ขั้นตอน: 1 ก่อนอื่นฉันสร้างโฟลเดอร์ splashImageResource และเพิ่มไฟล์ launchScreen.xib ด้วยภาพสแปลช

ขั้นตอน: 2 เปลี่ยนรหัสตามที่เขียนไว้ในแท็กมุมมองย่อย ด้วยรหัสนี้<subviews> <imageView userInteractionEnabled="NO" contentMode="scaleAspectFill" image="splash.png" translatesAutoresizingMaskIntoConstraints="NO" id="ZkI-RL-69Z"> </imageView> </subviews>

ขั้นตอน: 3 คุณควรเปิดแอปของคุณใน Xcode ขั้นตอนดังต่อไปนี้:

ก) ไปที่โฟลเดอร์โครงการของคุณ

b) เปิดโฟลเดอร์ ios

c) ไปที่ไฟล์ที่มี. xcodeproj เป็นนามสกุลในกรณีของฉันมันคือ splasScreenTutorial.xcodeproj

d) เปิดไฟล์นี้ใน Xcode ของคุณ

e) ลบไฟล์ launchScreen.xib

f) คลิกที่โฟลเดอร์ splashScreenTutorial จากนั้นไปที่ส่วน TARGETS

g) คลิกที่แท็บทั่วไปที่มุมบนซ้ายของ Xcode ของคุณและเลื่อนลงไปที่ไอคอนแอพและเปิดรูปภาพ

h) ไปที่ Launch Images Source และคลิก Use Asset Catalog คลิกที่โยกย้าย

i) ลบข้อความ LaunchScreen ออกจาก Launch Screen File

j) กลับไปที่โฟลเดอร์โครงการของคุณและเปิดไฟล์ Images.xcassets คุณควรเห็น AppIcon และ LaunchImage

k) จากนั้นคลิกที่ LaunchImage สุดท้ายลากภาพหน้าจอเริ่มต้นที่คุณมีขนาดแตกต่างกันไปที่ช่อง Launch Image

ลากภาพแบบนี้

ทดสอบหน้าจอสแปลช a) หากต้องการดูการเปลี่ยนแปลงคุณต้องลบแอพออกจากโปรแกรมจำลองของคุณหากคุณได้เรียกใช้แอพในตอนแรก

b) ในการลบแอพให้คลิกที่เมนูฮาร์ดแวร์บนแถบ Simulator ของคุณแล้วไปที่หน้าแรก

c) แตะไอคอนแอพที่คุณต้องการลบค้างไว้แล้วคลิกที่เครื่องหมาย X บนไอคอน

d) เรียกใช้แอปของคุณอีกครั้งโดยใช้ react-native run-ios

คุณสามารถเห็นหน้าจอเริ่มต้นของคุณ

สำหรับฉันXCode 10.1และreact-native 59.2ฉันต้องทำตามขั้นตอนเพิ่มเติมหลังจากเพิ่มรูปภาพสตอรีบอร์ดและรูปภาพสากล 1 ภาพแล้ว

• คลิกขวาที่รูปภาพคลิกShow in Finderจากนั้นแก้ไขContents.jsonไฟล์ของคุณ
• เพิ่มรูปภาพในส่วน 2x และ 3x
• ไปที่กระดานเรื่องราวของ Launch Screen พร้อมเมนู "ไม้บรรทัด"
• ตรวจสอบให้แน่ใจว่าลูกศรสีแดงด้านในเปิดอยู่เท่านั้นไม่ใช่ด้านนอกลูกศรสีแดง
• คลิก "ระยะขอบสัมพัทธ์ของพื้นที่ปลอดภัย"

ตอนนี้รูปภาพควรอยู่ตรงกลางของ iPhone ทุกขนาด (ทดสอบกับ Portrait)

หากคุณต้องการใช้ไฟล์ Launch Screen .xib ที่มีอยู่ในตอนแรก React Native ได้ตั้งค่าไว้แล้ว แต่ด้วยโลโก้และสีพื้นหลังของคุณเอง (และไม่มีข้อความเริ่มต้นของ React Native) คุณสามารถทำตามคำแนะนำได้ที่นี่: https: // medium.com/@kelleyannerose/react-native-ios-splash-screen-in-xcode-bd53b84430ec

หากคุณสร้างหน้าจอ Launch ด้วยความช่วยเหลือของ React คุณควรเพิ่มสิ่งเดียวกันในไฟล์ LaunchScreen.xib ใน iOS Xcode เพื่อให้คุณสามารถจับภาพหน้าจอและเพิ่มเป็นภาพใน Images.xcassets

เปิด LaunchScreen จากนั้นเพิ่ม UIImageView ใน View from Object Library จาก Right Panel ใน Xcode

เพิ่มข้อ จำกัด ต่อท้ายชั้นนำด้านล่างและด้านบนลงในมุมมอง ดังที่แสดงด้านล่าง -

อย่าลืมเปลี่ยน UIImageView ContentMode เป็น AspectFit เพื่อให้ดูเหมือนกันเมื่อแอปทำงาน

หลังจากนั้นคุณต้องเพิ่มรหัสใน AppDelegate เพื่อที่คุณจะไม่ได้หน้าจอสีขาว รหัสคือ -

 UIView* launchScreenView = [[[NSBundle mainBundle] loadNibNamed:@"LaunchScreen" owner:self options:nil] objectAtIndex:0];
 launchScreenView.frame = self.window.bounds;
 rootView.loadingView = launchScreenView;

คุณสามารถอ้างอิง - https://facebook.github.io/react-native/docs/running-on-device.html#pro-tip

สำหรับผู้ที่ยังประสบปัญหายังมีอีกหนึ่งขั้นตอนที่หายไปจากคำตอบที่ยอมรับก่อนที่จะทำให้หน้าจอเปิดตัว iOS ทำงาน

เปิดInfo.plistในโฟลเดอร์โครงการและลบคีย์ "Main nib file base name" จากนั้นสร้างใหม่และหวังว่าปัญหาจะหายไป

เมื่อทำตามวิธีแก้ปัญหาข้างต้นแอพของฉันติดค้างบนหน้าจอ Splash ดังนั้นฉันจึงทำ 7 ขั้นตอนต่อไปนี้เพื่อเพิ่มหน้าจอเริ่มต้นที่กำหนดเองบน iOS

1. เปิด Xcode และค้นหาไฟล์ LaunchScreen.xibไฟล์ในโปรเจ็กต์ของคุณ (โปรดสังเกตว่านี่คือหน้าจอที่แสดงโดยค่าเริ่มต้นใน ios)
2. ในการลบ / แก้ไขข้อความบนหน้าจอให้คลิกที่มันและทำการเปลี่ยนแปลงที่จำเป็นตามที่คุณต้องการ
3. หากต้องการเปลี่ยนสีพื้นหลังให้ค้นหาไอคอนต่อไปนี้บนแถบด้านขวาและคลิกปุ่มไอคอนเล็ก ๆ ที่ด้านบนสุดที่สี่จากด้านซ้าย (เมื่อคุณวางเมาส์เหนือไอคอนจะมีข้อความว่า "Show the Attributes Inspector")

4. ตอนนี้คุณรู้วิธีเปลี่ยนสีพื้นหลังแล้วให้เพิ่มภาพลงในหน้าจอ Splash โดยคลิกที่ปุ่มต่อไปนี้และเลือกมุมมองภาพจากรายการแล้วลากและวางไว้ที่ที่คุณต้องการบนหน้าจอเริ่มต้น

5. ตอนนี้เราต้องเพิ่มภาพImages.xcassetsเพื่อที่เราจะได้อ้างอิงในการ LaunchScreen.xibทำ goto Images.xcassetsนั้น คลิกที่+ปุ่มตามด้วยimportจากนั้นเพิ่มภาพที่คุณต้องการแสดงในหน้าจอเริ่มต้น ด้านล่างAppIconคุณจะเห็นชื่อไฟล์ภาพของคุณ นี่คือชื่อที่เราจะใช้อ้างอิงในไฟล์LaunchScreen.xib

6. ตอนนี้เราต้องอ้างอิงภาพที่เราเพิ่มในLaunchScreen.xibไฟล์เพื่อย้อนกลับไปLaunchScreen.xibและคลิกimage viewที่เราเพิ่มไว้ก่อนหน้านี้และที่มุมขวามือคุณจะเห็นตัวเลือกมากมาย คลิกที่ภาพแรกที่ระบุimageและเลือกภาพที่คุณนำเข้าในขั้นตอนที่ 5

7. ทำความสะอาดโครงการและเรียกใช้react-native run-iosและคุณจะเห็นการเปลี่ยนแปลง

คุณควรตั้งค่าแหล่งที่มาของภาพหน้าจอเปิดเป็นชุดภาพของคุณ หลังจากนั้นให้ลบไฟล์ LauncScreen.xib หลังจากนั้นทำการค้นหาทั่วโลกในโครงการของคุณและลบการอ้างอิงทั้งหมดไปยัง LaunchScreen.xib (ดูในโปรเจ็กต์ทั้งหมดของคุณฉันใช้โปรแกรมแก้ไขข้อความประเสริฐดังนั้นจึงเป็น cmd + shift + f) และควรใช้งานได้