在应用程序启动时显示启动画面。在准备好时隐藏它。
Show a splash screen during app startup. Hide it when you are ready.
For migration from the v6, check the MIGRATION.md guide.
This library follows the React Native releases support policy.
It is supporting the latest version, and the two previous minor series.
$ npm install --save react-native-bootsplash
# --- or ---
$ yarn add react-native-bootsplash⚠️ Don't forget going into the ios directory to execute a pod install.
In order to speed up the setup, we provide a CLI to generate assets, update config files, create the Android Drawable XML file and the iOS Storyboard file automatically ✨.
$ npx react-native-bootsplash generate --help
# --- or ---
$ yarn react-native-bootsplash generate --helpThe command can take multiple arguments:
…In order to use the --brand, --brand-width and --dark-* options, you must specify a --license-key.
With it, the generator is able to output over 50 files (logo and brand images generated in all pixel densities, dark mode versions, etc.), saving you (and your company!) a massive amount of time not only at creation, but also at each adjustment ⏱️
_ This license key grants unlimited and unrestricted usage of the generator for the buyer's purposes (meaning you can execute the assets generation as much as you want)._
…expo-splash-screen:$ npm uninstall expo-splash-screen
# --- or ---
$ yarn remove expo-splash-screen{
"expo": {
"plugins": [
- [
- "expo-splash-screen",
- {
- "image": "./assets/images/splash-icon.png",
- "imageWidth": 200,
- "resizeMode": "contain",
- "backgroundColor": "#ffffff"
- }
- ],
]
}
}BOOTSPLASH_LICENSE_KEY environment variable):import type { ConfigContext, ExpoConfig } from "expo/config";
import bootsplash from "react-native-bootsplash/expo"; // use `require` in app.config.js
export default ({ config }: ConfigContext): ExpoConfig => ({
// …
platforms: ["android", "ios", "web"], // must be explicit
plugins: [
bootsplash({
logo: "./assets/logo.png",
logoWidth: 100,
background: "#f5fcff",
// …
}),
],
});{
"expo": {
// …
"platforms": ["android", "ios", "web"], // must be explicit
"plugins": [
[
"react-native-bootsplash",
{
"logo": "./assets/logo.png",
"logoWidth": 100,
"background": "#f5fcff",
// …
},
],
],
},
}_ The available plugins options are:_
…Edit your ios/YourApp/AppDelegate.swift file:
import ReactAppDependencyProvider
import RNBootSplash // ⬅️ add this import
// …
class ReactNativeDelegate: RCTDefaultReactNativeFactoryDelegate {
// …
// ⬇️ override this method
override func customize(_ rootView: RCTRootView) {
super.customize(rootView)
RNBootSplash.initWithStoryboard("BootSplash", rootView: rootView) // ⬅️ initialize the splash screen
}
}Edit your android/app/src/main/java/com/yourapp/MainActivity.kt file:
// ⬇️ add these required imports
import android.os.Bundle
import com.zoontek.rnbootsplash.RNBootSplash
// …
class MainActivity : ReactActivity() {
// …
override fun onCreate(savedInstanceState: Bundle?) {
RNBootSplash.init(this, R.style.BootTheme) // ⬅️ initialize the splash screen
super.onCreate(savedInstanceState)
}
}// ⬇️ add these required imports
import android.os.Bundle
import com.swmansion.rnscreens.fragment.restoration.RNScreensFragmentFactory
import com.zoontek.rnbootsplash.RNBootSplash
// …
class MainActivity : ReactActivity() {
// …
override fun onCreate(savedInstanceState: Bundle?) {
supportFragmentManager.fragmentFactory = RNScreensFragmentFactory()
RNBootSplash.init(this, R.style.BootTheme) // ⬅️ initialize the splash screen
super.onCreate(savedInstanceState)
}
}// ⬇️ add these required imports
import android.os.Bundle
import com.zoontek.rnbootsplash.RNBootSplash
// …
class MainActivity : ReactActivity() {
// …
override fun onCreate(savedInstanceState: Bundle?) {
RNBootSplash.init(this, R.style.BootTheme) // ⬅️ initialize the splash screen
super.onCreate(null)
}
}ℹ️ Refer to previous package documentation for setup steps with React Native < 0.80.
Hide the splash screen (immediately, or with a fade out).
type hide = (config?: { fade?: boolean }) => Promise<void>;import { useEffect } from "react";
import { Text } from "react-native";
import BootSplash from "react-native-bootsplash";
const App = () => {
useEffect(() => {
const init = async () => {
// …do multiple sync or async tasks
};
init().finally(async () => {
await BootSplash.hide({ fade: true });
console.log("BootSplash has been hidden successfully");
});
}, []);
return <Text>My awesome app</Text>;
};Return the current visibility status of the native splash screen.
type isVisible = () => boolean;import BootSplash from "react-native-bootsplash";
if (BootSplash.isVisible()) {
// Do something
}A hook to easily create a custom hide animation by animating all splash screen elements using Animated, react-native-reanimated or else (similar as the video on top of this documentation).
……This example is simple for documentation purpose (we only animate the container).
** A more complex example is available in the /example folder.**
By default, the system bars uses dark-content in light mode and light-content in dark mode. To enforce a specific value, edit your values/styles.xml file:
<resources>
<style name="BootTheme" parent="Theme.BootSplash">
<item name="darkContentBarsStyle">true</item>
</style>
</resources>For the sake of simplicity. Since the light and dark versions of your assets are likely identical (except for the colors), if your index.html file is compressed with gzip, the size difference will be negligible.
If you are using React Navigation, you can hide the splash screen once the navigation container and all children have finished mounting by using the onReady function.
import { NavigationContainer } from "@react-navigation/native";
import BootSplash from "react-native-bootsplash";
const App = () => (
<NavigationContainer
onReady={() => {
BootSplash.hide();
}}
>
{/* content */}
</NavigationContainer>
);Testing code which uses this library requires some setup since we need to mock the native methods.
To add the mocks, create a file jest/setup.js (or any other file name) containing the following code:
jest.mock("react-native-bootsplash", () => {
return {
hide: jest.fn().mockResolvedValue(),
isVisible: jest.fn(),
useHideAnimation: jest.fn().mockReturnValue({
container: {},
logo: { source: 0 },
brand: { source: 0 },
}),
};
});After that, we need to add the setup file in the jest config. You can add it under setupFiles option in your jest config file:
{
"setupFiles": ["<rootDir>/jest/setup.js"]
}This module is provided as is, I work on it in my free time.
If you or your company uses it in a production app, consider sponsoring this project . You also can contact me for premium enterprise support: help with issues, prioritize bugfixes, feature requests, etc.
暂无开放 Issues，或尚未同步最近议题。