react native Android启动页面、修改图标、修改名字、修复启动白屏

给Android添加启动页

实现启动页基本有三种思路：

• 使用RN开源组件；
• 原生java编写；
• 模拟启动页，这种方法基本就是replace路由栈；http://www.jianshu.com/p/da658aceeb44

我们之所以设置启动页，很大一部分原因是在启动页显示的背后可以利用宝贵的时间来初始化我们的应用，启动页消失后，初始化的工作就应该做完。因此，使用开源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">随遇而安</string>
</resources>

修改App的图标

也很简单，在android\app\src\main\res\mipmap-xxxxxx中直接覆盖图标就可以，注意图标的大小。

最终效果图：

app.gif

修复Android启动白屏的问题，后续会加上，敬请期待。。。。。