react-native 配置启动图支持ios和android
配置启动图我使用的是第三方模块react-native-splash-screen,更加详细的请到 github地址进一步查看，我们这里提供基本的配置以及个别问题的解决方案
当前环境
- 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
yarn add react-native-splash-screen
[or]
npm install react-native-splash-screen -S
手动配置
-
用Xcode打开项目, 找到
Libraries目录，右键选择Add Files to [your project's name]
-
在
{project}/node_modules/react-native-splash-screen/ios找到SplashScreen.xcodeproj文件，并添加
-
在XCode中，选择你的项目， 选择
bilid Phases并将SplashScreen.xcodeproj/Products/libSplashScreen.a文件添加到Link Binary With Libraries中,拖过去即可
-
添加搜索路径：在项目 → Build Settings → Search Paths → Header Search Paths处添加一项为
$(SRCROOT)/../node_modules/react-native-splash-screen/ios
android配置
- 在项目目录
{prject}/android/下找到settings.gradle文件添加一下内容
...
include ':react-native-splash-screen'
project(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android')
...
- 在项目目录
{prject}/android/app/下找到build.gradle文件添加compile project(':react-native-splash-screen')
...
dependencies {
...
compile project(':react-native-splash-screen')
}
...
- 找到项目目录
{project}/android/app/src/main/java/com/app/下MainApplication.java文件，引入import org.devio.rn.splashscreen.SplashScreenReactPackage;并添加new SplashScreenReactPackage()
...
import org.devio.rn.splashscreen.SplashScreenReactPackage;
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
...
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new SplashScreenReactPackage() //here
);
}
...
};
}
...
启动图相关配置
配置ios
- 找到项目目录
{project}/ios/{project}/下AppDelegate.m文件，引入#import "SplashScreen.h"添加内容如下
...
#import "SplashScreen.h" // here
...
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
...
[SplashScreen show]; // here
...
return YES;
}
@end
-
在XCode中, 点击
App/Images.xcassrts通过LaunchImage添加启动图片
-
在XCode中，选择你的项目， 选择
General找到App Icons and Launch Images下的Launch Images Sourc选择你设置好的LaunchImage
-
如出现错误
# unknown receiver 'SplashScreen'; did you mean 'RNSplashScreen', 则改动源码以及AppDelegate.m文件如下：1.源码改动: 找到
{project}/node_modules/react-native-splash-screen/ios文件夹下的RNSplashScreen.m文件，将其[SplashScreen show];修改为[RNSplashScreen show];,如下图
2.
AppDelegate.m文件改动: 找到项目目录{project}/ios/{project}/下AppDelegate.m文件，将所有SplashScreen改为RNSplashScreen即可，如下图
配置android
-
在项目目录
{prject}/android/app/src/main/res/下创建layout文件夹 -
在
layout文件夹下创建launch_screen.xml添加一下内容
xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/launch_screen">
</LinearLayout>
-
将你的启动图改名为
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
-
在
{prject}/android/app/src/main/res/values/文件夹下修改名为添加一个名为primary_dark的属性并设置其颜，添加内容如下
...
<color name="primary_dark">#000000</color>
...
- 如果您希望启动屏幕透明，打开
{prject}/android/app/src/main/res/values/styles.xml并添加<item name="android:windowIsTranslucent">trueitem>到文件中
在项目中关闭启动图
配置完毕之后重启你的app发现启动图已经展现出来了但是迟迟没有关闭
我们需要在项目中进行控制，将他在合适的时候进行关闭，方法如下：
-
首先引入进行模块
import SplashScreen from 'react-native-splash-screen' -
使用
SplashScreen.hide()方法将其关闭
import SplashScreen from 'react-native-splash-screen'
export default class App extends Component {
componentDidMount() {
// do stuff while splash screen is shown
// After having done stuff (such as async tasks) hide the splash screen
SplashScreen.hide();
}
}
