react-native启动页配置

1启动图

安装第三方库(react-native-splash-screen)；

根据react-native版本选择不同的安装包
React Native >= 0.47.0 use v3.+,
React Native < 0.47.0 use v2.1.0

yarn add react-native-splash-screen
or npm
npm i react-native-splash-screen --save

• 然后link
• react-native link react-native-splash-screen

1手动配置找到目录android/settings.gradle添加如下代码

include ':react-native-splash-screen'   
project(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android')

2找到目录android/app/build.gradle添加如下代码

...
dependencies {
    ...
    implementation project(':react-native-splash-screen') //在对应位置添加这句
}

3 在android目录下找到 MainApplication.java文件添加如下代码添加时注意版本选择

// react-native-splash-screen >= 0.3.1
import org.devio.rn.splashscreen.SplashScreenReactPackage;
// react-native-splash-screen < 0.3.1
import com.cboy.rn.splashscreen.SplashScreenReactPackage;

public class MainApplication extends Application implements ReactApplication {

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }

        @Override
        protected List getPackages() {
            return Arrays.asList(
                    new MainReactPackage(),
            new SplashScreenReactPackage()  //here
            );
        }
    };

    @Override
    public ReactNativeHost getReactNativeHost() {
        return mReactNativeHost;
    }
}

4 在android目录下找到 MainActivity.java文件添加如下代码添加时注意版本选择

import android.os.Bundle; // here
import com.facebook.react.ReactActivity;
// react-native-splash-screen >= 0.3.1
import org.devio.rn.splashscreen.SplashScreen; // here
// react-native-splash-screen < 0.3.1
import com.cboy.rn.splashscreen.SplashScreen; // here

public class MainActivity extends ReactActivity {
   @Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this);  // here
        super.onCreate(savedInstanceState);
    }
    // ...other code
}

5在app/src/main/res/layout目录下创建launch_screen.xml文件并添加如下代码

6在app/src/main/res/目录下创建如下文件以适配在不同屏幕下选择不同尺寸的图片

• drawable-ldpi
• drawable-mdpi
• drawable-hdpi
• drawable-xhdpi
• drawable-xxhdpi
• drawable-xxxhdpi

修改app/src/main/res/values/colors.xml

    #000000

如果要设置启动页透明只需要修改android/app/src/main/res/values/styles.xml

配置完这些就算完成了，然后在对应的App初始页关闭启动图就可以了

import SplashScreen from 'react-native-splash-screen'

export default class WelcomePage extends Component {

    componentDidMount() {
        // do stuff while splash screen is shown
        // After having done stuff (such as async tasks) hide the splash screen
        SplashScreen.hide(); // =>引入文件，调用该方法关闭启动图
    }
}