当前环境
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
安装第三方模块 react-native-splash-screen
手动配置
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
android配置
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()
启动图相关配置
配置ios
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
配置android
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并添加
在项目中关闭启动图
首先引入进行模块import SplashScreen from 'react-native-splash-screen'
使用SplashScreen.hide()方法将其关闭