react native Android启动页面

电玩女神 2021-09-15 16:24 329阅读 0赞

给Android添加启动图片

这里使用 rn-splash-screen

使用步骤：

1、安装  npm i --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文件，添加一行

5、修改Android/app/src/main/androidmainfest.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、在入口文件中使用：

/**
     * 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过程中很一直报错，如果按照以上方法修改的话，是没有问题的，

有效的办法是编译之前删除android\\app\\build文件夹下的四个文件夹，这样就不会重复报错了。

## 修改App的图标 ##

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

## 修改APP的名称 ##

很简单,我们直接打开android/app/src/main/res/values/strings.xml，即可看到配置中的app\_name，修改为你想要的即可:

链接：https://www.jianshu.com/p/da658aceeb44