android splash screen

Author: wangdicoder

android/app/app-release.apk

@@ -1,8 +1,16 @@
 package com.gankio;
 
+import android.os.Bundle;
+
 import com.facebook.react.ReactActivity;
+import com.gankio.util.SplashScreen;
 
 public class MainActivity extends ReactActivity {
+    @Override
+    protected void onCreate(Bundle savedInstanceState) {
+        SplashScreen.show(this, true);
+        super.onCreate(savedInstanceState);
+    }
 
     /**
      * Returns the name of the main component registered from JavaScript.

android/app/src/main/assets/index.android.bundle

@@ -25,7 +25,8 @@ protected boolean getUseDeveloperSupport() {
     protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
           new MainReactPackage(),
-            new VectorIconsPackage()
+            new VectorIconsPackage(),
+              new MyReactPackage()
       );
     }
   };

android/app/src/main/assets/index.android.bundle.meta

@@ -0,0 +1,35 @@
+package com.gankio;
+
+import com.facebook.react.ReactPackage;
+import com.facebook.react.bridge.JavaScriptModule;
+import com.facebook.react.bridge.NativeModule;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.uimanager.ViewManager;
+import com.gankio.util.SplashScreenModule;
+
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.List;
+
+/**
+ * Created by wangdi on 14/11/16.
+ */
+
+public class MyReactPackage implements ReactPackage{
+    @Override
+    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
+        List<NativeModule> list = new ArrayList<>();
+        list.add(new SplashScreenModule(reactContext));
+        return list;
+    }
+
+    @Override
+    public List<Class<? extends JavaScriptModule>> createJSModules() {
+        return Collections.emptyList();
+    }
+
+    @Override
+    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
+        return Collections.emptyList();
+    }
+}

android/app/src/main/java/com/gankio/MainActivity.java

@@ -0,0 +1,50 @@
+package com.gankio.util;
+
+import android.app.Activity;
+import android.app.Dialog;
+import java.lang.ref.WeakReference;
+
+import com.gankio.R;
+
+/**
+ * Created by wangdi on 14/11/16.
+ */
+
+public class SplashScreen {
+    private static Dialog mSplashDialog;
+    private static WeakReference<Activity> mActivity;
+
+    public static void show(final Activity activity, final boolean fullScreen){
+        if (activity == null) return;
+        mActivity = new WeakReference<Activity>(activity);
+        activity.runOnUiThread(new Runnable() {
+            @Override
+            public void run() {
+                if (!activity.isFinishing()) {
+
+                    mSplashDialog = new Dialog(activity, fullScreen ? R.style.SplashScreen_Fullscreen: R.style.SplashScreen_SplashTheme);
+                    mSplashDialog.setContentView(R.layout.launch_screen);
+                    mSplashDialog.setCancelable(false);
+
+                    if (!mSplashDialog.isShowing()) {
+                        mSplashDialog.show();
+                    }
+                }
+            }
+        });
+    }
+
+    public static void hide(Activity activity){
+        if (activity == null) activity = mActivity.get();
+        if (activity == null) return;
+
+        activity.runOnUiThread(new Runnable() {
+            @Override
+            public void run() {
+                if (mSplashDialog != null && mSplashDialog.isShowing()) {
+                    mSplashDialog.dismiss();
+                }
+            }
+        });
+    }
+}

android/app/src/main/java/com/gankio/MainApplication.java

@@ -0,0 +1,33 @@
+package com.gankio.util;
+
+import android.app.Activity;
+import android.app.Dialog;
+
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReactContextBaseJavaModule;
+import com.facebook.react.bridge.ReactMethod;
+
+import java.lang.ref.WeakReference;
+
+/**
+ * Created by wangdi on 14/11/16.
+ */
+
+public class SplashScreenModule extends ReactContextBaseJavaModule{
+
+
+    public SplashScreenModule(ReactApplicationContext reactContext) {
+        super(reactContext);
+    }
+
+    @Override
+    public String getName() {
+        return "SplashScreen";
+    }
+
+    @ReactMethod
+    public void hide(){
+        SplashScreen.hide(getCurrentActivity());
+    }
+
+}

android/app/src/main/java/com/gankio/MyReactPackage.java

@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="utf-8"?>
+<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
+                android:layout_width="match_parent"
+                android:layout_height="match_parent"
+                android:background="#fff">
+    <ImageView
+        android:layout_width="80dp"
+        android:layout_height="80dp"
+        android:src="@drawable/js_assets_icon"
+        android:id="@+id/logo"
+        android:layout_centerHorizontal="true"
+        android:layout_marginTop="130dp"/>
+
+    <TextView
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_below="@id/logo"
+        android:text="干货集中营"
+        android:textSize="20dp"
+        android:layout_centerHorizontal="true"
+        android:layout_marginTop="10dp"
+        android:textColor="#000"/>
+
+    <TextView
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_centerHorizontal="true"
+        android:layout_alignParentBottom="true"
+        android:text="获取每日技术干货"
+        android:textSize="16dp"
+        android:textColor="#666"
+        android:layout_marginBottom="50dp"/>
+
+</RelativeLayout>

android/app/src/main/java/com/gankio/util/SplashScreen.java

@@ -5,4 +5,16 @@
         <!-- Customize your theme here. -->
     </style>
 
+    <style name="SplashScreen_SplashAnimation">
+        <item name="android:windowExitAnimation">@android:anim/fade_out</item>
+    </style>
+
+    <style name="SplashScreen_SplashTheme" parent="Theme.AppCompat.NoActionBar">
+        <item name="android:windowAnimationStyle">@style/SplashScreen_SplashAnimation</item>
+    </style>
+
+    <style name="SplashScreen_Fullscreen" parent="SplashScreen_SplashTheme">
+        <item name="android:windowFullscreen">true</item>
+    </style>
+
 </resources>

android/app/src/main/java/com/gankio/util/SplashScreenModule.java

@@ -8,6 +8,7 @@ import React from 'react';
 import {Navigator} from 'react-native';
 import {store} from './store/index';
 import MainPage from './containers/MainPage';
+import SplashScreen from './native_modules/SplashScreen';
 import Test from './containers/DiscoveryTab/GirlsPage'
 
 export default class App extends React.Component{
@@ -23,4 +24,8 @@ export default class App extends React.Component{
             </Provider>
         );
     }
+
+    componentDidMount(){
+        SplashScreen.hide();
+    }
 }

android/app/src/main/res/layout/launch_screen.xml

@@ -47,13 +47,6 @@ class ListViewForGirls extends Component{
                     onRequestClose={this._triggerModal.bind(this)}
                     transparent={true}>
                     <View style={styles.modalBackground}>
-                        <View style={styles.closeBtn}>
-                            <TouchableOpacity
-                                onPress={this._triggerModal.bind(this)}
-                                activeOpacity={theme.touchableOpacityActiveOpacity}>
-                                <Icon name="ios-close-circle-outline" color="#fff" size={px2dp(30)}/>
-                            </TouchableOpacity>
-                        </View>
                         {this.state.loadedHD ?
                             <View>
                                 <Image style={{width: this.state.imageWidth, height: this.state.imageHeight}}
@@ -62,6 +55,13 @@ class ListViewForGirls extends Component{
                             :
                             <ActivityIndicator size="large" color={this.props.tabIconColor}/>
                         }
+                        <View style={styles.closeBtn}>
+                            <TouchableOpacity
+                                onPress={this._triggerModal.bind(this)}
+                                activeOpacity={theme.touchableOpacityActiveOpacity}>
+                                <Icon name="ios-close-circle-outline" color="#fff" size={px2dp(30)}/>
+                            </TouchableOpacity>
+                        </View>
                     </View>
                 </Modal>
             </View>
@@ -169,7 +169,8 @@ const styles = StyleSheet.create({
         alignItems: 'flex-end',
         justifyContent: 'flex-start',
         paddingTop: px2dp(20),
-        paddingRight: px2dp(20)
+        paddingRight: px2dp(20),
+        zIndex: 1
     }
 });
 

android/app/src/main/res/values/styles.xml

@@ -41,7 +41,7 @@ class BottomTabBar extends Component{
     }
 
     _renderItem(Component, tab, tabName, normalIcon, selectedIcon){
-        const {navigator, mainThemeColor, tabIconColor} = this.props;
+        const {navigator, tabIconColor} = this.props;
         return(
             <TabNavigator.Item
                 selected={this.state.selectedTab === tab}