react native 添加启动页并解决启动白屏问题

react native 添加启动页并解决启动白屏问题

      一般实现方式有3种：

          1，使用RN开源组件:  https://github.com/stoneWeb/elm-react-native  (github 饿了么开源项目)

          2，原生代码编写：https://github.com/wangdicoder/react-native-Gank      (github开源项目)

         3，模拟启动页，这种方法基本就是replace路由栈：https://git.oschina.net/LC_github_io/MyReduxDemo

我们之所以设置启动页，很大一部分原因是在启动页显示的背后可以利用宝贵的时间来初始化我们的应用，启动页消失后，初始化的工作就应该做完。因此，使用开源RN组件是比较靠谱的，闲言少叙，直奔主题！

我们使用rn-splash-screen组件，其他组件比如react-native-splash-screen和react-native-splashscreen等配置过程都会出现很多坑，只有这个坑最少。

react-native-splash-screen还是星星最多的，只不过初次配置太多问题了，以后有时间再回来收拾他。

使用步骤：

1. 安装 npm install --save rn-splash-screen
2. 连接 react-native link rn-splash-screen
3. 在res文件中新建drawable文件夹，放置splash.png;
4. 修改android/app/src/main/res/values/styles.xml文件，添加一行：

   <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    + <item name="android:windowBackground">@drawable/splash</item>
   </style>

   5.修改android/app/src/main/AndroidManifest.xml文件：

android:name=".MainApplication"
        android:allowBackup="true"
        android:label="@string/app_name"
 -      android:icon="@mipmap/ic_launcher"
 -      android:theme="@style/AppTheme">
 +      android:icon="@mipmap/ic_launcher">
        <activity
          android:name=".MainActivity"
          android:label="@string/app_name"
 +        android:theme="@style/AppTheme"
          android:configChanges="keyboard|keyboardHidden|orientation|screenSize">
          <intent-filter>
              <action android:name="android.intent.action.MAIN" />

6.修改Android/app/src/main/Java/com/APPNAMES/MainActivity.java文件：

import android.graphics.Color;
import android.os.Bundle;

import com.facebook.react.ReactInstanceManager;
import com.facebook.react.bridge.ReactContext;
import com.mehcode.reactnative.splashscreen.SplashScreen;

public class MainActivity extends ReactActivity {
  // [...]

  @Override
  protected void onCreate(Bundle savedInstanceState) {
      // Show the js-controlled splash screen
      SplashScreen.show(this, getReactInstanceManager());

      super.onCreate(savedInstanceState);

      // [...]
  }

  // [...]
}

7.在入口文件中测试：

rn-splash-screen提供了两个API，open()和hide()。

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
// 引入引导页组件
import SplashScreen from 'rn-splash-screen';

export default class splashTest extends Component {

  constructor(props){
    super(props);
    this.state = {};
  }

  componentDidMount() {
    setTimeout(() => {
      SplashScreen.hide();
    }, 2000);
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('splashTest', () => splashTest);

注意：React-native run-android过程中很一直报错，如果按照以上方法修改的话，是没有问题的（RN 0.43），有效的办法是编译之前删除android\app\build文件夹下的四个文件夹，这样就不会重复报错了。

修改APP得名字：直接打开android/app/src/main/res/values/strings.xml，即可看到配置中的app_name，修改为你想要的即可:

<resources>
    <string name="app_name">Hello</string>
</resources>

修改APP得图标在android\app\src\main\res\mipmap-xxxxxx中直接覆盖图标就可以，注意图标的大小。

最终效果图：

                               

最后附上大神关于优化哒方案： 

1，ReactNative安卓首屏白屏优化，

2. 设置SplashScreen

https://github.com/SpikeKing/LearningRN  （同一篇，有gif图  http://www.jianshu.com/p/08f296eb67e4）

参考：安卓白屏优化 

https://github.com/cnsnake11/blog/blob/master/ReactNative%E5%BC%80%E5%8F%91%E6%8C%87%E5%AF%BC/ReactNative%E5%AE%89%E5%8D%93%E9%A6%96%E5%B1%8F%E7%99%BD%E5%B1%8F%E4%BC%98%E5%8C%96.md

##################################################

性能优化

1.探索react native首屏渲染最佳实践

http://web.jobbole.com/85451/

2. QQ空间终端开发团队  https://zhuanlan.zhihu.com/p/20587485

3.React Native 性能优化建议

http://www.ghugo.com/react-native-high-performance/