react-native 配置启动图支持ios和android

Posted 2023-04-04

参考技术A 当前环境

OS: macOS High Sierra 10.13.5

Node: 8.11.3

Yarn: 1.7.0

npm: 5.6.0

Watchman: 4.9.0

Xcode: Xcode 9.4.1

react: 16.3.1 => 16.3.1

react-native: 0.55.4 => 0.55.4

react-native-splash-screen: 3.1.0 => 3.1.0

1：用Xcode打开项目, 找到Libraries目录，右键选择Add Files to [your project's name]

2：在project/node_modules/react-native-splash-screen/ios找到SplashScreen.xcodeproj文件，并添加

3：在XCode中，选择你的项目， 选择bilid Phases并将SplashScreen.xcodeproj/Products/libSplashScreen.a文件添加到Link Binary With Libraries中,拖过去即可

4：添加搜索路径：在项目 → Build Settings → Search Paths → Header Search Paths处添加一项为$(SRCROOT)/../node_modules/react-native-splash-screen/ios

1：在项目目录prject/android/下找到settings.gradle文件添加一下内容

2：在项目目录prject/android/app/下找到build.gradle文件添加compile project(':react-native-splash-screen')

3：找到项目目录project/android/app/src/main/java/com/app/下MainApplication.java文件，引入import org.devio.rn.splashscreen.SplashScreenReactPackage;并添加new SplashScreenReactPackage()

1:找到项目目录project/ios/project/下AppDelegate.m文件，引入#import "SplashScreen.h"添加内容如下

2:在XCode中, 点击App/Images.xcassrts通过LaunchImage添加启动图片

3:在XCode中，选择你的项目， 选择General找到App Icons and Launch Images下的Launch Images Sourc选择你设置好的LaunchImage

4:如出现错误# unknown receiver 'SplashScreen'; did you mean 'RNSplashScreen', 则改动源码以及AppDelegate.m文件如下：

        4.1.源码改动: 找到project/node_modules/react-native-splash-screen/ios文件夹下的RNSplashScreen.m文件，将其[SplashScreen show];修改为[RNSplashScreen show];,如下图

  4.2:AppDelegate.m文件改动: 找到项目目录project/ios/project/下AppDelegate.m文件，将所有SplashScreen改为RNSplashScreen即可，如下图

4.3:重启尝试是否有其他问题，修改源码地址可查看我的 github 项目地址，更多问题请查看官方 issues

1:在项目目录prject/android/app/src/main/res/下创建layout文件夹

在layout文件夹下创建launch_screen.xml添加一下内容

2:将你的启动图改名为launch_screen.png并添加到prject/android/app/src/main/res/文件夹下相应的drawable文件夹中（根据需求配置相应大小的文件夹）

1.drawable-ldpi

2.drawable-mdpi

3.drawable-hdpi

4.drawable-xhdpi

5.drawable-xxhdpi

6.drawable-xxxhdpi

3：在prject/android/app/src/main/res/values/文件夹下修改名为添加一个名为primary_dark的属性并设置其颜，添加内容如下

4：如果您希望启动屏幕透明，打开prject/android/app/src/main/res/values/styles.xml并添加<item name="android:windowIsTranslucent">trueitem>到文件中

首先引入进行模块import SplashScreen from 'react-native-splash-screen'

使用SplashScreen.hide()方法将其关闭

iOS开发简记：指定APP的图标与启动图

各位兄弟姐妹们，早上好，本人花了将近一个月的时间打造了一个完整的IOS版的App，

期间包括开发，测试，上线审核，现在花点时间把实现的过程分享给大家，“知音”app功能简单，适合对象为初学者，后面我会把iOS客户端源码、API接口源码“呈献”给大家，谢谢大家的支持，

欢迎园友一起交流一起学习，废话少说，装逼正式开始：

 

每个APP都应该有自己的图标跟启动图。

这里介绍怎么设置APP的图标跟启动图。

（1）图标

小程的xcode是10.0版本，设置图标的入口如下：

点击入口后，进到设置页面，如下：

可以看到有很多空位，在等着拉入图标，因为iphone与ipad，不同的系统，不同的机型尺寸，使用了一系列不同尺寸的图标。

如果最终要提交到appstore，而且这个APP主要是在iphone或ipod上运行的，那应该有下面截图中的图标：

小程这里只以58*58的图标来演示。

先准备好图标，然后，拉到图标设置页面：

每个位置的尺寸，可以计算出来，比如3x的60pt，那就是3*60=180。

 

再次运行程序，就可以看到图标了，效果如下：

（2）启动图

启动程序，到看到程序主页面的空档，显示的是启动图（也可以是动画效果）。

启动图的设置，苹果提供了两种方式，一种是设置Launch Images Source，这是一种旧的设置方式，跟图标的设置相似，另一种是使用Launch Screen File的方式，这是一种新的方式，在xcode8.0后出现。

注意，为了避免启动图各种奇怪的问题（比如设置了但不生效，甚至要重启手机才能生效，等等），不要同时使用两种设置方式，并且，建议只使用新的设置方式，也就是苹果推荐的Launch Screen File的方式。

小程这里只使用LaunchScreen.storyboard来设置启动图。

启动图的设置入口是这样的：

按上图来操作，把imageview拉到view中，然后准备好启动图，比如准备好一张640*960的图片，并把这种图片加入到项目中，然后在imageview属性中选择这种图片即可，详细操作参考下图：

注意，启动图不一定要以Default.png来命名。应该保证，更换的启动图使用新的名字，不要使用同名覆盖旧启动图的方式，那样会更新不了；应该使用新的名字，再给imageview重新选择image。

感谢各位的关注，后面我会把IOS客户端源码、API源码呈献给大家，完整的示例大家可以暂时到AppStore下载安装“知音”。