Skip to content

Commit d349e55

Browse files
sky42550564sky42550564
committed
add android and ios splashscreen
1 parent 7aabf0a commit d349e55

File tree

17 files changed

+715
-20
lines changed

17 files changed

+715
-20
lines changed

‎.gitignore

+3-1
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,11 @@
22
*.DS_Store
33
.DS_Store
44
*Thumbs.db
5+
*.iml
56
.gradle
67
.idea
8+
node_modules
79
npm-debug.log
8-
/android/RCTDes/build
10+
/android/build
911
/ios/**/*xcuserdata*
1012
/ios/**/*xcshareddata*

‎.npmignore

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
*.DS_Store
2+
.DS_Store
3+
*Thumbs.db
4+
.gradle
5+
.idea
6+
*.iml
7+
npm-debug.log
8+
node_modules
9+
/android/build
10+
/ios/**/*xcuserdata*
11+
/ios/**/*xcshareddata*
12+

‎README.md

+122-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,126 @@
1-
# React Native splashscreen (remobile)
2-
A splashscreen for react-native
1+
# React Native SplashScreen (remobile)
2+
A splashscreen for react-native, hide when application loaded
33

44
## Installation
55
```sh
6-
npm install react-native-splashscreen --save
6+
npm install @remobile/react-native-splashscreen --save
77
```
8+
### Installation (iOS)
9+
* Drag RCTSplashScreen.xcodeproj to your project on Xcode.
10+
* 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.
11+
* Look for Header Search Paths and make sure it contains $(SRCROOT)/../../../react-native/React as recursive.
12+
13+
* In your project, Look for Header Search Paths and make sure it contains $(SRCROOT)/../node_modules/@remobile/react-native-splashscreen/ios/CRTSplashScreen
14+
* In AppDelegate
15+
16+
* delete your project's LaunchScreen.xib
17+
* Dray SplashScreenResource to your project [if you want change image, replace splash.png]
18+
19+
```objc
20+
...
21+
#import "CRTSplashScreen.h" //<--- import
22+
...
23+
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
24+
moduleName:@"KitchenSink"
25+
initialProperties:nil
26+
launchOptions:launchOptions];
27+
[CRTSplashScreen show:rootView]; //<--- add show SplashScreen
28+
29+
self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
30+
UIViewController *rootViewController = [[UIViewController alloc] init];
31+
rootViewController.view = rootView;
32+
self.window.rootViewController = rootViewController;
33+
[self.window makeKeyAndVisible];
34+
return YES;
35+
```
36+
37+
38+
### Installation (Android)
39+
```gradle
40+
...
41+
include ':react-native-splashscreen'
42+
project(':react-native-splashscreen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splashscreen/android')
43+
```
44+
45+
* In `android/app/build.gradle`
46+
47+
```gradle
48+
...
49+
dependencies {
50+
...
51+
compile project(':react-native-splashscreen')
52+
}
53+
```
54+
* if you want change image, replace res/drawable/splash.png
55+
56+
* register module (in MainActivity.java)
57+
58+
```java
59+
import com.remobile.splashscreen.*; // <--- import
60+
61+
public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {
62+
......
63+
@Override
64+
protected void onCreate(Bundle savedInstanceState) {
65+
super.onCreate(savedInstanceState);
66+
mSplashScreenPackage = ;// <--- alloc package
67+
68+
mReactInstanceManager = ReactInstanceManager.builder()
69+
.setApplication(getApplication())
70+
.setBundleAssetName("index.android.bundle")
71+
.setJSMainModuleName("index.android")
72+
.addPackage(new MainReactPackage())
73+
.addPackage(new RCTSplashScreenPackage(this)) // <------ add here
74+
.setUseDeveloperSupport(BuildConfig.DEBUG)
75+
.setInitialLifecycleState(LifecycleState.RESUMED)
76+
.build();
77+
78+
mReactRootView.startReactApplication(mReactInstanceManager, "ExampleRN", null);
79+
80+
setContentView(mReactRootView);
81+
}
82+
83+
......
84+
}
85+
```
86+
87+
### Screencasts
88+
![gif](https://github.com/remobile/react-native-splashscreen/blob/master/screencasts/splash.gif)
89+
90+
## Usage
91+
92+
### Example
93+
```js
94+
'use strict';
95+
var React = require('react-native');
96+
var {
97+
AppRegistry,
98+
View,
99+
Text,
100+
} = React;
101+
var SplashScreen = require('@remobile/react-native-splashscreen');
102+
103+
var KitchenSink = React.createClass({
104+
componentDidMount: function() {
105+
SplashScreen.hide();
106+
},
107+
render() {
108+
return(
109+
<View>
110+
<Text>
111+
fangyunjiang is a good developer!
112+
</Text>
113+
</View>
114+
);
115+
}
116+
});
117+
118+
AppRegistry.registerComponent('KitchenSink', () => KitchenSink);
119+
```
120+
121+
### HELP
122+
* look https://github.com/apache/cordova-plugin-splashscreen
123+
124+
125+
### thanks
126+
* this project come from https://github.com/apache/cordova-plugin-splashscreen

‎android/build.gradle

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
apply plugin: 'com.android.library'
2+
3+
android {
4+
compileSdkVersion 23
5+
buildToolsVersion "23.0.1"
6+
7+
defaultConfig {
8+
minSdkVersion 16
9+
targetSdkVersion 22
10+
versionCode 1
11+
versionName "1.0"
12+
}
13+
buildTypes {
14+
release {
15+
minifyEnabled false
16+
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
17+
}
18+
}
19+
}
20+
21+
dependencies {
22+
compile fileTree(dir: 'libs', include: ['*.jar'])
23+
compile 'com.android.support:appcompat-v7:23.0.1'
24+
compile 'com.facebook.react:react-native:0.13.+'
25+
compile project(':react-native-cordova')
26+
}

‎android/src/main/AndroidManifest.xml

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.remobile.splashscreen">
3+
</manifest>

‎android/src/main/java/com/remobile/splashscreen/RCTSplashScreen.java

+125
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
package com.remobile.splashscreen;
2+
3+
import android.app.Activity;
4+
import android.app.Dialog;
5+
import android.content.Context;
6+
import android.graphics.Color;
7+
import android.os.Handler;
8+
import android.view.Display;
9+
import android.view.View;
10+
import android.view.ViewGroup;
11+
import android.view.ViewGroup.LayoutParams;
12+
import android.view.WindowManager;
13+
import android.view.animation.AlphaAnimation;
14+
import android.view.animation.Animation;
15+
import android.widget.ImageView;
16+
import android.widget.LinearLayout;
17+
18+
import com.facebook.react.bridge.ReactApplicationContext;
19+
import com.facebook.react.bridge.ReactContextBaseJavaModule;
20+
import com.facebook.react.bridge.ReactMethod;
21+
22+
23+
public class RCTSplashScreen extends ReactContextBaseJavaModule {
24+
private static Dialog splashDialog;
25+
private ImageView splashImageView;
26+
27+
private Activity activity;
28+
29+
public RCTSplashScreen(ReactApplicationContext reactContext, Activity activity) {
30+
super(reactContext);
31+
this.activity = activity;
32+
showSplashScreen();
33+
}
34+
35+
@Override
36+
public String getName() {
37+
return "SplashScreen";
38+
}
39+
40+
protected Activity getActivity() {
41+
return activity;
42+
}
43+
44+
@ReactMethod
45+
public void hide() {
46+
final Handler handler = new Handler();
47+
handler.postDelayed(new Runnable() {
48+
public void run() {
49+
removeSplashScreen();
50+
}
51+
}, 500);
52+
}
53+
54+
55+
private void removeSplashScreen() {
56+
getActivity().runOnUiThread(new Runnable() {
57+
public void run() {
58+
if (splashDialog != null && splashDialog.isShowing()) {
59+
AlphaAnimation fadeOut = new AlphaAnimation(1, 0);
60+
fadeOut.setDuration(1000);
61+
View view = ((ViewGroup)splashDialog.getWindow().getDecorView()).getChildAt(0);
62+
view.startAnimation(fadeOut);
63+
fadeOut.setAnimationListener(new Animation.AnimationListener() {
64+
@Override
65+
public void onAnimationStart(Animation animation) {
66+
}
67+
@Override
68+
public void onAnimationEnd(Animation animation) {
69+
splashDialog.dismiss();
70+
splashDialog = null;
71+
splashImageView = null;
72+
}
73+
@Override
74+
public void onAnimationRepeat(Animation animation) {
75+
}
76+
});
77+
}
78+
}
79+
});
80+
}
81+
82+
private int getSplashId() {
83+
int drawableId = getActivity().getResources().getIdentifier("splash", "drawable", getActivity().getClass().getPackage().getName());
84+
if (drawableId == 0) {
85+
drawableId = getActivity().getResources().getIdentifier("splash", "drawable", getActivity().getPackageName());
86+
}
87+
return drawableId;
88+
}
89+
90+
private void showSplashScreen() {
91+
final int drawableId = getSplashId();
92+
if ((splashDialog != null && splashDialog.isShowing())||(drawableId == 0)) {
93+
return;
94+
}
95+
getActivity().runOnUiThread(new Runnable() {
96+
public void run() {
97+
// Get reference to display
98+
Display display = getActivity().getWindowManager().getDefaultDisplay();
99+
Context context = getActivity();
100+
101+
// Use an ImageView to render the image because of its flexible scaling options.
102+
splashImageView = new ImageView(context);
103+
splashImageView.setImageResource(drawableId);
104+
LayoutParams layoutParams = new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
105+
splashImageView.setLayoutParams(layoutParams);
106+
splashImageView.setMinimumHeight(display.getHeight());
107+
splashImageView.setMinimumWidth(display.getWidth());
108+
splashImageView.setBackgroundColor(Color.BLACK);
109+
splashImageView.setScaleType(ImageView.ScaleType.FIT_XY);
110+
111+
// Create and show the dialog
112+
splashDialog = new Dialog(context, android.R.style.Theme_Translucent_NoTitleBar);
113+
// check to see if the splash screen should be full screen
114+
if ((getActivity().getWindow().getAttributes().flags & WindowManager.LayoutParams.FLAG_FULLSCREEN)
115+
== WindowManager.LayoutParams.FLAG_FULLSCREEN) {
116+
splashDialog.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
117+
WindowManager.LayoutParams.FLAG_FULLSCREEN);
118+
}
119+
splashDialog.setContentView(splashImageView);
120+
splashDialog.setCancelable(false);
121+
splashDialog.show();
122+
}
123+
});
124+
}
125+
}

‎android/src/main/java/com/remobile/splashscreen/RCTSplashScreenPackage.java

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
package com.remobile.splashscreen;
2+
3+
import java.util.Arrays;
4+
import java.util.Collections;
5+
import java.util.List;
6+
7+
import android.app.Activity;
8+
import android.content.Intent;
9+
10+
import com.facebook.react.ReactPackage;
11+
import com.facebook.react.bridge.JavaScriptModule;
12+
import com.facebook.react.bridge.NativeModule;
13+
import com.facebook.react.bridge.ReactApplicationContext;
14+
import com.facebook.react.uimanager.ViewManager;
15+
16+
17+
public class RCTSplashScreenPackage implements ReactPackage {
18+
19+
private Activity activity;
20+
private RCTSplashScreen mModuleInstance;
21+
22+
public RCTSplashScreenPackage(Activity activity) {
23+
super();
24+
this.activity = activity;
25+
}
26+
27+
28+
@Override
29+
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
30+
mModuleInstance = new RCTSplashScreen(reactContext, activity);
31+
return Arrays.<NativeModule>asList(
32+
mModuleInstance
33+
);
34+
}
35+
36+
@Override
37+
public List<Class<? extends JavaScriptModule>> createJSModules() {
38+
return Collections.emptyList();
39+
}
40+
41+
@Override
42+
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
43+
return Arrays.<ViewManager>asList();
44+
}
45+
}

‎android/src/main/res/drawable/splash.png

191 KB
Loading

‎index.js

+3-14
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,14 @@
11
/*
22
* (The MIT License)
33
* Copyright (c) 2015-2016 YunJiang.Fang <[email protected]>
4-
* @providesModule splashscreen
4+
* @providesModule SplashScreen
55
* @flow-weak
66
*/
77
'use strict';
88

99
var React = require('react-native');
1010
var {
11-
View,
12-
Text,
11+
NativeModules,
1312
} = React;
1413

15-
module.exports = React.createClass({
16-
render() {
17-
return (
18-
<View style={{flex:1, justifyContent: 'center', alignItems: 'center',}}>
19-
<Text>
20-
come soon
21-
</Text>
22-
</View>
23-
)
24-
}
25-
});
14+
module.exports = NativeModules.SplashScreen;

0 commit comments

Comments
 (0)