android界面名称修改,react native Android启动页面、修改图标、修改名字、修复启动白屏...

给Android添加启动页

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

使用RN开源组件；

原生java编写；

模拟启动页，这种方法基本就是replace路由栈；

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

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

使用步骤：

安装 npm install --save rn-splash-screen

连接 react-native link rn-splash-screen

在res文件中新建drawable文件夹，放置splash.png;

修改android/app/src/main/res/values/styles.xml文件，添加一行：

+ @drawable/splash

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">

android:name=".MainActivity"

android:label="@string/app_name"

+ android:theme="@style/AppTheme"

android:configChanges="keyboard|keyboardHidden|orientation|screenSize">

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 (

Welcome to React Native!

);

}

}

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，修改为你想要的即可:

随遇而安

修改App的图标

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

最终效果图：

app.gif

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