A splashscreen for react-native, hide when application loaded
npm install @remobile/react-native-splashscreen --save-
Drag RCTSplashScreen.xcodeproj to your project on Xcode.
-
Click on your main project file (the one that represents the .xcodeproj) select Build Phases and drag libRCTSplashScreen.a from the Products folder inside the RCTSplashScreen.xcodeproj.
-
In AppDelegate.m
... #import "RCTSplashScreen.h" //<--- import ... RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"KitchenSink" initialProperties:nil launchOptions:launchOptions]; [RCTSplashScreen show:rootView]; //<--- add show SplashScreen self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; UIViewController *rootViewController = [[UIViewController alloc] init]; rootViewController.view = rootView; self.window.rootViewController = rootViewController; [self.window makeKeyAndVisible]; return YES;... include ':react-native-splashscreen' project(':react-native-splashscreen').projectDir = new File(settingsDir, '../node_modules/@remobile/react-native-splashscreen/android')- In
android/app/build.gradle
... dependencies { ... compile project(':react-native-splashscreen') }- register module (in MainApplication.java)
...... import com.remobile.splashscreen.RCTSplashScreenPackage; // <--- import ...... @Override protected List<ReactPackage> getPackages() { ...... new RCTSplashScreenPackage(MainActivity.activity, true), // <------ add here [the seconde params is translucent] ...... }- register module (in MainActivity.java)
public class MainActivity extends ReactActivity { public static Activity activity; // <------ add here ...... @Override protected String getMainComponentName() { activity = this; // <------ add here ...... } }
'use strict'; var React = require('react'); var ReactNative = require('react-native'); var { AppRegistry, View, Text, } = ReactNative; var SplashScreen = require('@remobile/react-native-splashscreen'); var KitchenSink = React.createClass({ componentDidMount: function() { SplashScreen.hide(); }, render() { return( <View> <Text> fangyunjiang is a good developer! </Text> </View> ); } }); AppRegistry.registerComponent('KitchenSink', () => KitchenSink);translucentis translucent enable
hide()hide SplashScreen
- you must install ffmpeg first
#!/bin/bash src="${1-./img/splash.png}" ffmpeg -i ${src} -s 640x1136 ../ios/CardC/splash/Default-568h@2x~iphone.png -y ffmpeg -i ${src} -s 750x1334 ../ios/CardC/splash/Default-667h.png -y ffmpeg -i ${src} -s 1242x2208 ../ios/CardC/splash/Default-736h.png -y ffmpeg -i ${src} -s 640x960 ../ios/CardC/splash/Default@2x~iphone.png -y ffmpeg -i ${src} -s 320x480 ../ios/CardC/splash/Default~iphone.png -y ffmpeg -i ${src} -s 320x568 ../ios/CardC/splash/splash.png -y mkdir -p ../android/app/src/main/res/drawable cp ../ios/CardC/splash/splash.png ../android/app/src/main/res/drawable/splash.png