Tôi đang làm việc với một ứng dụng React Native và tôi đang cố gắng thiết lập màn hình khởi chạy tùy chỉnh nhưng tôi không thể.

React Native tạo LaunchScreen.xib theo mặc định, vì vậy tôi đã tạo LaunchImage bên trong Images.xcassets:

Tôi cũng đã đọc rằng tôi đã sửa đổi "Tệp màn hình khởi chạy" trong "Biểu tượng ứng dụng và hình ảnh khởi chạy" trong các tùy chọn của mình:

Khi tôi đã làm xong, màn hình khởi chạy của tôi trở nên đen hoàn toàn và khi ứng dụng được tải, có cả khung màu đen trên cùng và dưới cùng:

Vì vậy, tôi không biết mình phải làm gì để thiết lập màn hình khởi chạy trong dự án React Native của mình.

Tôi sẽ rất biết ơn nếu ai đó có thể giúp tôi giải quyết những rắc rối đó.

Cảm ơn trước.

Tôi đã có thể giải quyết vấn đề, với sự trợ giúp của chuỗi này: Khởi chạy Hình ảnh không hiển thị trong ứng dụng iOS (sử dụng Images.xcassets)

Vì vậy, tôi sẽ giải thích nó sâu sắc trong trường hợp nó có thể giúp ích cho người khác.

Đầu tiên , bạn cần tạo một số hình ảnh nhất định. Những gì tôi đã sử dụng cho đó là mẫu này và trang web này với trình tạo tự động: TiCons

Khi tôi tải xuống hình ảnh của mình, tôi đã lấy những cái bên trong thư mục asset / iphone, tôi chỉ lấy những cái đó:

• Default@2x.png (640x960)
• Default-568h@2x.png (640x1136)
• Default-667h@2x.png (750x1334)
• Default-Portrait-736h@3x.png (1242x2208)
• Default-Landscape-736h@3x.png (2208x1242)

Ngoài ra, bạn cần tệp Contents.json này trong cùng một thư mục, tôi nhận được nó từ một người bạn:

{
  "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"
  }
}

Vì vậy, tại thời điểm này, tôi đã tạo một thư mục có tên LaunchImage.launchimage bên trong thư mục Images.xcassets trong dự án React Native của mình và lưu hình ảnh và tệp Contents.json bên trong nó:

Thứ hai , bạn phải mở dự án của mình bằng Xcode và trong cài đặt "Chung", bên dưới " Biểu tượng ứng dụng và Hình ảnh khởi chạy ", chúng tôi phải để trống tùy chọn " Tệp màn hình khởi chạy " (cũng có thể xóa tệp LaunchScreen.xib bên trong dự án của mình ), và sau đó nhấp vào " Sử dụng Danh mục nội dung ". Một phương thức sẽ mở ra, chúng tôi chọn Di chuyển danh mục Hình ảnh

Bây giờ, trong bộ chọn " Launch Images Source ", chúng ta có thể chọn thư mục mà chúng ta đã tạo trước đó, LaunchImage ( thư mục chứa hình ảnh của chúng ta):

Chúng tôi chọn mục này thay vì Tài sản thương hiệu và chúng tôi có thể xóa thư mục Tài sản thương hiệu .

Tại thời điểm này, chúng tôi sẽ có thể chạy ứng dụng React Native với các hình ảnh khởi chạy tùy chỉnh của chúng tôi:

Tôi biết nó có vẻ hơi phức tạp đối với một nhiệm vụ được cho là dễ dàng, nhưng sau khi đọc nhiều về nó, đây là cách duy nhất tôi có thể làm cho hình ảnh giật gân của mình hoạt động, vì vậy tôi muốn chia sẻ với cộng đồng.

Đảm bảo xóa ứng dụng khỏi trình mô phỏng. Sau đó, làm sạch dự án của bạn.

Tôi đã xem xét những câu trả lời này rất nhiều trong SO chứa các giải pháp về cách tạo màn hình khởi chạy mới. Ý tôi là chúng ta hãy nghĩ về nó trong một phút.

Khi chúng tôi tạo một dự án gốc phản ứng mới, chúng tôi sẽ thấy gì trên màn hình khởi chạy?

> Màn hình khởi chạy mặc định của Facebook

Vì vậy, điều đó khiến tôi suy nghĩ, Họ đã làm điều đó như thế nào?

Họ đã tạo ra một LaunchScreen.xib

Tôi nghĩ rằng phải có một lý do cho điều này. Vì vậy, tôi đã đi vào LaunchScreen.xibvà thực hiện thay đổi đối với văn bản mặc định "React Native ..." hoặc những gì nó đã nói. Tôi đã chạy ứng dụng một lần nữa để thấy rằng màn hình khởi chạy phản ánh các chỉnh sửa của tôi.

Giải pháp 1 Chỉnh sửa LaunchScreen.xib hiện có

Giải pháp 2 Tạo của riêng tôi

Vì vậy, tôi đã làm, tôi mất nhiều thời gian hơn để gõ câu trả lời này hơn là học cách tạo câu trả lời của riêng tôi. Both of these solutions are compatible with all the devices.

Bước 1:

Xóa bỏ LaunchScreen.xib

bước 2:

nhấp chuột images.xcassets phải vào khoảng trắng nhấp chuột **import**rồi chọn hình ảnh bạn muốn thêm.

bước 3:

Nhấp chuột phải vào thư mục gốc của dự án của bạn và thêm một tệp mới cùng loại Launch Screenvà đặt tên cho nó như những gì bạn muốn.

bước 4

Nhấp vào dự án của bạn ở điều hướng bên trái, chuyển đến Settings> Generalvà dưới App Icons and Launch Images. Đảm bảo Launch Image Sourcetrống và Launch Screen Filetrùng tên với màn hình khởi chạy mới tạo của bạn.

bước 5

Nhấp vào tệp hoàn toàn mới mà bạn đã tạo step 2, kéo Image Viewhoặc chỉnh sửa tệp khiến bạn hài lòng.

Vậy là xong, bạn đã hoàn thành. Bạn thậm chí không cần phải làm sạch dung dịch, chỉ cần xây dựng lại.

Cập nhật

generator-rn-toolboxkhông được dùng nữa. Thay vào đó, hãy sử dụng react-native-make .

câu trả lời cũ

Tôi đề xuất hộp công cụ tạo-rn- để áp dụng màn hình khởi chạy hoặc biểu tượng chính bằng cách sử dụng phản ứng gốc. Nó đơn giản và dễ sử dụng hơn thông qua cli dưới dạng react-native.

• Không cần mở XCode.
• Không cần tạo nhiều tệp hình ảnh cho nhiều độ phân giải khác nhau.
• Bất cứ lúc nào thay đổi màn hình khởi chạy bằng cách sử dụng một dòng khen ngợi.

Yêu cầu

• nút> = 6
• Một hình ảnh vuông hoặc tệp psd có kích thước độ phân giải hơn 2208x2208 px cho màn hình khởi chạy (màn hình giật gân)
• Tâm trí tích cực ;)

Tải về

1. Cài đặt hộp công cụ tạo-rn-và yo
2. npm install -g yo generator-rn-toolbox
3. Cài đặt imagemagick brew install imagemagick

4. Áp dụng màn hình giật gân trên iOS

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

   hoặc Android

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

Đó là tất cả. :)

Nguồn

Chỉ cần trải qua điều này và làm việc một điều trị. Chặn đường duy nhất mà tôi phát hiện không xóa nội dung trình mô phỏng. Nếu bạn thấy rằng màn hình khởi chạy mới của mình không hoạt động, bạn cần phải mở mô phỏng và đi tới phần sau:

Trình mô phỏng> Đặt lại nội dung và cài đặt

Phải có một số bộ nhớ đệm khó khăn đang diễn ra trong trình mô phỏng đó nhưng khi điều đó đã hoàn tất - hãy chạy lại và bạn sẽ thấy ứng dụng. Đảm bảo rằng bạn làm điều này cho cả trình mô phỏng xcode và trình mô phỏng gốc phản ứng!

Đảm bảo rằng lựa chọn 'Khởi chạy Tệp Màn hình' trống:

Theo liên kết này:

Nếu bạn muốn thêm màn hình giật gân vào ứng dụng React Native của tôi, hãy làm theo quy trình, tất cả kết quả sẽ là của bạn.

BƯỚC: 1 Đầu tiên, tôi tạo một thư mục splashImageResource và thêm tệp launcherScreen.xib với hình ảnh giật gân.

BƯỚC: 2 thay đổi mã như được viết bên trong thẻ lượt xem phụ. với mã này<subviews> <imageView userInteractionEnabled="NO" contentMode="scaleAspectFill" image="splash.png" translatesAutoresizingMaskIntoConstraints="NO" id="ZkI-RL-69Z"> </imageView> </subviews>

BƯỚC: 3 Bạn nên mở ứng dụng của mình bằng Xcode. Dưới đây là các bước để làm theo:

a) Đi tới thư mục dự án của bạn

b) Mở thư mục ios

c) Chuyển đến tệp có .xcodeproj làm phần mở rộng, trong trường hợp của tôi là splasScreenTutorial.xcodeproj

d) Mở tệp này trong Xcode của bạn.

e) Xóa tệp LauncherScreen.xib.

f) Nhấp vào thư mục splashScreenTutorial, sau đó chuyển đến phần TARGETS

g) Nhấp vào Tab Chung ở góc trên bên trái của Xcode của bạn và cuộn xuống Biểu tượng ứng dụng và Hình ảnh khởi chạy

h) Đi tới Khởi chạy Nguồn Hình ảnh và nhấp vào Sử dụng Danh mục Nội dung. Nhấp vào di chuyển.

i) Xóa văn bản LaunchScreen khỏi Launch Screen File.

j) Quay lại thư mục dự án của bạn và mở tệp Images.xcassets. Bạn sẽ thấy AppIcon và LaunchImage.

k) Tiếp theo, nhấp vào LaunchImage, Cuối cùng, kéo các hình ảnh màn hình giật gân mà bạn có với các kích thước khác nhau vào hộp Launch Image.

Kéo những hình ảnh như thế này.

Kiểm tra Splash Screen a) Để xem các thay đổi, bạn cần xóa ứng dụng khỏi trình mô phỏng nếu bạn đã chạy ứng dụng ban đầu.

b) Để xóa ứng dụng, hãy nhấp vào menu Phần cứng trên thanh Trình mô phỏng và chuyển đến Trang chủ.

c) Nhấn và giữ vào biểu tượng ứng dụng cụ thể mà bạn muốn xóa và nhấp vào dấu X trên biểu tượng.

d) Chạy lại ứng dụng của bạn bằng cách sử dụng React-native run-ios

Bạn có thể thấy Splash Screen của mình

Đối với tôi XCode 10.1và react-native 59.2tôi đã phải thực hiện các bước bổ sung sau khi đã thêm hình ảnh, bảng phân cảnh và 1 hình ảnh phổ quát.

• Nhấp chuột phải vào hình ảnh, nhấp vào Show in Finder, sau đó chỉnh sửa Contents.jsontệp của bạn
• Thêm hình ảnh vào các phần 2x và 3x
• Chuyển đến bảng phân cảnh của Màn hình khởi chạy, với menu "thước kẻ"
• Đảm bảo chỉ bật mũi tên đỏ bên trong , không bật mũi tên đỏ bên ngoài
• Nhấp vào "Lề Tương đối Khu vực An toàn"

Giờ đây, hình ảnh sẽ được căn giữa trên iPhone mọi kích thước (thử nghiệm trên Chân dung).

Nếu bạn muốn sử dụng tệp .xib Launch Screen hiện có mà React Native đã thiết lập ban đầu, nhưng với biểu trưng và màu nền của riêng bạn (và không có bất kỳ văn bản mặc định nào của React Native), bạn có thể làm theo hướng dẫn tại đây: https: // medium.com/@kelleyannerose/react-native-ios-splash-screen-in-xcode-bd53b84430ec .

Nếu bạn tạo màn hình Khởi chạy với sự trợ giúp của React thì bạn nên thêm thứ tương tự vào tệp LaunchScreen.xib trong iOS Xcode để bạn có thể chụp Ảnh chụp màn hình và thêm nó làm Hình ảnh trong Images.xcassets.

Mở LaunchScreen sau đó thêm UIImageView trong View from Object Library từ Right Panel trong Xcode.

Thêm Ràng buộc Theo dõi, Dẫn đầu, Dưới cùng và Trên cùng vào Chế độ xem. Như được hiển thị bên dưới -

Đừng quên thay đổi UIImageView ContentMode thành AspectFit để nó trông giống nhau khi ứng dụng chạy.

Sau đó, bạn cần thêm mã trong AppDelegate để không bị màn hình trắng. Mã là -

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

Bạn có thể Tham khảo - https://facebook.github.io/react-native/docs/running-on-device.html#pro-tip

Chỉ dành cho những người vẫn gặp sự cố, còn thiếu một bước nữa trong câu trả lời được chấp nhận trước khi làm cho màn hình Khởi chạy iOS hoạt động.

Mở Info.plisttrong thư mục dự án và xóa khóa "Tên cơ sở tệp nib chính". Sau đó, xây dựng lại và hy vọng sự cố đã biến mất.

Khi làm theo các giải pháp trên, ứng dụng của tôi bị kẹt trên Splash Screen, vì vậy tôi đã thực hiện 7 bước sau để thêm màn hình Splash tùy chỉnh trên iOS.

1. Mở Xcode và định vị LaunchScreen.xibtệp trong dự án của bạn (Lưu ý rằng đây là màn hình được hiển thị theo mặc định trong ios)
2. Để xóa / chỉnh sửa văn bản trên màn hình, hãy nhấp vào văn bản đó và thực hiện các thay đổi cần thiết theo ý muốn.
3. Để thay đổi màu nền, hãy tìm các biểu tượng sau trên thanh bên phải và nhấp vào nút biểu tượng nhỏ ở trên cùng, thứ tư từ bên trái (khi bạn di chuột, nó sẽ thông báo “Hiển thị Trình kiểm tra thuộc tính”)

4. Bây giờ bạn đã biết cách thay đổi màu nền, hãy thêm hình ảnh vào màn hình Splash để thực hiện điều đó nhấp vào nút sau và chọn chế độ xem Hình ảnh từ danh sách và kéo và đặt nó ở bất kỳ nơi nào bạn muốn trên màn hình giật gân.

5. Bây giờ chúng ta phải thêm hình ảnh vào Images.xcassetsđể chúng ta có thể tham chiếu nó trong LaunchScreen.xibgoto để làm điều đó Images.xcassets. nhấp vào +nút theo sau importvà sau đó thêm hình ảnh bạn muốn hiển thị trong màn hình giật gân. Bên dưới, AppIconbạn sẽ thấy tên tệp hình ảnh của mình. Đây là tên chúng tôi sẽ sử dụng để tham chiếu trongLaunchScreen.xib

6. Bây giờ chúng ta phải tham chiếu đến hình ảnh mà chúng ta đã thêm trong LaunchScreen.xibtệp, vì vậy hãy điều hướng trở lại LaunchScreen.xibvà nhấp vào image viewmà chúng ta đã thêm trước đó và ở góc bên phải, bạn sẽ thấy nhiều tùy chọn. nhấp vào imagehình ảnh đầu tiên có nội dung và chọn hình ảnh bạn đã nhập ở bước 5

7. dọn dẹp dự án và chạy react-native run-iosvà bạn sẽ thấy những thay đổi.

Bạn nên đặt nguồn hình ảnh màn hình khởi chạy làm bộ hình ảnh của mình. Sau đó, xóa tệp LauncScreen.xib. Sau đó, thực hiện tìm kiếm toàn cục trong dự án của bạn và xóa tất cả các tham chiếu đến LaunchScreen.xib (xem trong toàn bộ dự án của bạn. Tôi sử dụng trình soạn thảo văn bản siêu phàm nên nó là cmd + shift + f) và nó sẽ hoạt động.