有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

react-native-splash-screen icon 启动页配置

前端框架 炮渣日记 2周前 (11-23) 27次浏览 已收录 0个评论 扫描二维码

安装

第一步:

npm i react-native-splash-screen –save

or yarn add react-native-splash-screen

rn > 0.60 自动依赖 无需以下操作

< 0.60

自动依赖

react-native link react-native-splash-screen

or rnpm link react-native-splash-screen

手动依赖

Android:

  • 在 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')
  • 在 android/app/build.gradle 文件,添加
...
dependencies {
    ...
    implementation project(':react-native-splash-screen')
}
  • 在 MainApplication.java 文件添加
// react-native-splash-screen >= 0.3.1
import org.devio.rn.splashscreen.SplashScreenReactPackage;
// react-native-splash-screen < 0.3.1
import com.cboy.rn.splashscreen.SplashScreenReactPackage;

public class MainApplication extends Application implements ReactApplication {

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                    new MainReactPackage(),
            new SplashScreenReactPackage()  //here
            );
        }
    };

    @Override
    public ReactNativeHost getReactNativeHost() {
        return mReactNativeHost;
    }
}

iOS:

  1. cd ios
  2. run pod install

OR

  1. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project’s name]
  2. Go to node_modules ➜ react-native-splash-screen and add SplashScreen.xcodeproj
  3. In XCode, in the project navigator, select your project. Add libSplashScreen.a to your project’s Build Phases ➜ Link Binary With Libraries
  4. To fix ‘RNSplashScreen.h’ file not found, you have to select your project → Build Settings → Search Paths → Header Search Paths to add:
  5. $(SRCROOT)/../node_modules/react-native-splash-screen/ios

第三步

Android:

更新 MainActivity.java 文件,如下:

import android.os.Bundle; // here
import com.facebook.react.ReactActivity;
// react-native-splash-screen >= 0.3.1
import org.devio.rn.splashscreen.SplashScreen; // here
// react-native-splash-screen < 0.3.1
import com.cboy.rn.splashscreen.SplashScreen; // here

public class MainActivity extends ReactActivity {
   @Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this);  // here
        super.onCreate(savedInstanceState);
    }
    // ...other code
}

iOS:

更新 AppDelegate.m 文件,如下:

#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#import "RNSplashScreen.h"  // here

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // ...other code

    [RNSplashScreen show];  // here
    // or
    //[RNSplashScreen showSplash:@"LaunchScreen" inRootView:rootView];
    return YES;
}

@end

在js 中,

import SplashScreen from ‘react-native-splash-screen’

SplashScreen.hide(); //隐藏启动图

Android:

添加 launch_screen.xml 文件 在 app/src/main/res/layout (如果不存在就创建改文件夹). 文件内添加如下代码:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/launch_screen" android:scaleType="centerCrop" />
</RelativeLayout>

在 app/src/main/res 内添加如下文件夹

  • drawable-ldpi
  • drawable-mdpi
  • drawable-hdpi
  • drawable-xhdpi
  • drawable-xxhdpi
  • drawable-xxxhdpi

添加主题颜色 primary_dark in
app/src/main/res/values/colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="primary_dark">#000000</color>
</resources>

可选配置

如果想要透明,

打开
android/app/src/main/res/values/styles.xml 添加代码<item name=”android:windowIsTranslucent”>true</item>,如下:

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <!--设置透明背景-->
        <item name="android:windowIsTranslucent">true</item>
    </style>
</resources>

配置完之后文件夹如下:

react-native-splash-screen icon 启动页配置

ios 配置

1,添加启动配置图,命名为LaunchImage

react-native-splash-screen icon 启动页配置

2,将Asset Catalog Launch Image Set Name 的值设置为 LaunchImage

react-native-splash-screen icon 启动页配置

3,配置info.plist

删除
  <key>UILaunchStoryboardName</key>
	<string>LaunchScreen</string>
添加
	<key>Launch image</key>
	<string>LaunchImage</string>
react-native-splash-screen icon 启动页配置

重新安装应用即可

参考:
https://github.com/crazycodeboy/react-native-splash-screen

喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址