Skip to content

Commit 44344fb

Browse files
author
TomWq
committed
更新文档
1 parent beb5c06 commit 44344fb

4 files changed

Lines changed: 678 additions & 4 deletions

File tree

‎README-v3.md‎

Lines changed: 330 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,330 @@
1+
# react-native-splash-screen
2+
3+
4+
[![Download](https://img.shields.io/badge/Download-v3.3.0-ff69b4.svg) ](https://www.npmjs.com/package/react-native-splash-screen)
5+
[ ![PRs Welcome](https://img.shields.io/badge/PRs-Welcome-brightgreen.svg)](https://github.com/crazycodeboy/react-native-splash-screen/pulls)
6+
[ ![react-native-splash-screen release](https://img.shields.io/github/release/crazycodeboy/react-native-splash-screen.svg?maxAge=2592000?style=flat-square)](https://github.com/crazycodeboy/GitHubPopular/releases)
7+
[ ![语言 中文](https://img.shields.io/badge/语言-中文-feb252.svg)](https://github.com/crazycodeboy/react-native-splash-screen/blob/master/README.zh.md)
8+
[![License MIT](http://img.shields.io/badge/license-MIT-orange.svg?style=flat)](https://raw.githubusercontent.com/crazycodeboy/react-native-check-box/master/LICENSE)
9+
[ ![原理 解析](https://img.shields.io/badge/原理-解析-brightgreen.svg)](https://github.com/crazycodeboy/RNStudyNotes/blob/master/React%20Native%20%E9%97%AE%E9%A2%98%E5%8F%8A%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88%E5%90%88%E9%9B%86/React%20Native%20%E5%90%AF%E5%8A%A8%E7%99%BD%E5%B1%8F%E9%97%AE%E9%A2%98%E8%A7%A3%E5%86%B3%E6%95%99%E7%A8%8B/React%20Native%20%E5%90%AF%E5%8A%A8%E7%99%BD%E5%B1%8F%E9%97%AE%E9%A2%98%E8%A7%A3%E5%86%B3%E6%95%99%E7%A8%8B.md)
10+
[ ![Flutter](https://img.shields.io/badge/Flutter-brightgreen.svg)](https://github.com/crazycodeboy/flutter_splash_screen)
11+
12+
A splash screen API for react-native which can programatically hide and show the splash screen. Works on iOS and Android.
13+
14+
## Content
15+
16+
- [Changes](#changes)
17+
- [Installation](#installation)
18+
- [Examples](#examples)
19+
- [Getting started](#getting-started)
20+
- [API](#api)
21+
- [Testing](#testing)
22+
- [Troubleshooting](#troubleshooting)
23+
- [Contribution](#contribution)
24+
25+
26+
## Changes
27+
For React Native >= 0.47.0 use [v3.+](https://github.com/crazycodeboy/react-native-splash-screen/releases), for React Native < 0.47.0 use [v2.1.0](https://github.com/crazycodeboy/react-native-splash-screen/releases/tag/v1.0.9)
28+
29+
## Examples
30+
* [Examples](https://github.com/crazycodeboy/react-native-splash-screen/tree/master/examples)
31+
32+
![react-native-splash-screen-Android](https://raw.githubusercontent.com/crazycodeboy/react-native-splash-screen/v3.0.0/examples/Screenshots/react-native-splash-screen-Android.gif)
33+
![react-native-splash-screen-iOS](https://raw.githubusercontent.com/crazycodeboy/react-native-splash-screen/v3.0.0/examples/Screenshots/react-native-splash-screen-iOS.gif)
34+
35+
36+
37+
## Installation
38+
39+
### First step(Download):
40+
Run `npm i react-native-splash-screen --save`
41+
42+
### Second step(Plugin Installation):
43+
44+
#### Automatic installation
45+
46+
`react-native link react-native-splash-screen` or `rnpm link react-native-splash-screen`
47+
48+
#### Manual installation
49+
50+
**Android:**
51+
52+
1. In your `android/settings.gradle` file, make the following additions:
53+
```java
54+
include ':react-native-splash-screen'
55+
project(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android')
56+
```
57+
58+
2. In your android/app/build.gradle file, add the `:react-native-splash-screen` project as a compile-time dependency:
59+
60+
```java
61+
...
62+
dependencies {
63+
...
64+
implementation project(':react-native-splash-screen')
65+
}
66+
```
67+
68+
3. Update the MainApplication.java file to use `react-native-splash-screen` via the following changes:
69+
70+
```java
71+
// react-native-splash-screen >= 0.3.1
72+
import org.devio.rn.splashscreen.SplashScreenReactPackage;
73+
// react-native-splash-screen < 0.3.1
74+
import com.cboy.rn.splashscreen.SplashScreenReactPackage;
75+
76+
public class MainApplication extends Application implements ReactApplication {
77+
78+
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
79+
@Override
80+
public boolean getUseDeveloperSupport() {
81+
return BuildConfig.DEBUG;
82+
}
83+
84+
@Override
85+
protected List<ReactPackage> getPackages() {
86+
return Arrays.<ReactPackage>asList(
87+
new MainReactPackage(),
88+
new SplashScreenReactPackage() //here
89+
);
90+
}
91+
};
92+
93+
@Override
94+
public ReactNativeHost getReactNativeHost() {
95+
return mReactNativeHost;
96+
}
97+
}
98+
```
99+
100+
**iOS:**
101+
102+
1. `cd ios`
103+
2. `run pod install`
104+
105+
>OR
106+
107+
1. In XCode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]`
108+
2. Go to `node_modules` ➜ `react-native-splash-screen` and add `SplashScreen.xcodeproj`
109+
3. In XCode, in the project navigator, select your project. Add `libSplashScreen.a` to your project's `Build Phases` ➜ `Link Binary With Libraries`
110+
4. To fix `'RNSplashScreen.h' file not found`, you have to select your project → Build Settings → Search Paths → Header Search Paths to add:
111+
112+
`$(SRCROOT)/../node_modules/react-native-splash-screen/ios`
113+
114+
115+
116+
### Third step(Plugin Configuration):
117+
118+
**Android:**
119+
120+
Update the `MainActivity.java` to use `react-native-splash-screen` via the following changes:
121+
122+
```java
123+
import android.os.Bundle; // here
124+
import com.facebook.react.ReactActivity;
125+
// react-native-splash-screen >= 0.3.1
126+
import org.devio.rn.splashscreen.SplashScreen; // here
127+
// react-native-splash-screen < 0.3.1
128+
import com.cboy.rn.splashscreen.SplashScreen; // here
129+
130+
public class MainActivity extends ReactActivity {
131+
@Override
132+
protected void onCreate(Bundle savedInstanceState) {
133+
SplashScreen.show(this); // here
134+
super.onCreate(savedInstanceState);
135+
}
136+
// ...other code
137+
}
138+
```
139+
140+
**iOS:**
141+
142+
Update `AppDelegate.m` with the following additions:
143+
144+
145+
```obj-c
146+
#import "AppDelegate.h"
147+
148+
#import <React/RCTBundleURLProvider.h>
149+
#import <React/RCTRootView.h>
150+
#import "RNSplashScreen.h" // here
151+
152+
@implementation AppDelegate
153+
154+
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
155+
{
156+
// ...other code
157+
158+
[RNSplashScreen show]; // here
159+
// or
160+
//[RNSplashScreen showSplash:@"LaunchScreen" inRootView:rootView];
161+
return YES;
162+
}
163+
164+
@end
165+
166+
```
167+
168+
## Getting started
169+
170+
Import `react-native-splash-screen` in your JS file.
171+
172+
`import SplashScreen from 'react-native-splash-screen'`
173+
174+
### Android:
175+
176+
Create a file called `launch_screen.xml` in `app/src/main/res/layout` (create the `layout`-folder if it doesn't exist). The contents of the file should be the following:
177+
178+
```xml
179+
<?xml version="1.0" encoding="utf-8"?>
180+
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
181+
android:orientation="vertical" android:layout_width="match_parent"
182+
android:layout_height="match_parent">
183+
<ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/launch_screen" android:scaleType="centerCrop" />
184+
</RelativeLayout>
185+
```
186+
187+
Customize your launch screen by creating a `launch_screen.png`-file and placing it in an appropriate `drawable`-folder. Android automatically scales drawable, so you do not necessarily need to provide images for all phone densities.
188+
You can create splash screens in the following folders:
189+
* `drawable-ldpi`
190+
* `drawable-mdpi`
191+
* `drawable-hdpi`
192+
* `drawable-xhdpi`
193+
* `drawable-xxhdpi`
194+
* `drawable-xxxhdpi`
195+
196+
Add a color called `primary_dark` in `app/src/main/res/values/colors.xml`
197+
198+
```
199+
<?xml version="1.0" encoding="utf-8"?>
200+
<resources>
201+
<color name="primary_dark">#000000</color>
202+
</resources>
203+
```
204+
205+
206+
**Optional steps：**
207+
208+
If you want the splash screen to be transparent, follow these steps.
209+
210+
Open `android/app/src/main/res/values/styles.xml` and add `<item name="android:windowIsTranslucent">true</item>` to the file. It should look like this:
211+
212+
```xml
213+
<resources>
214+
<!-- Base application theme. -->
215+
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
216+
<!-- Customize your theme here. -->
217+
<!--设置透明背景-->
218+
<item name="android:windowIsTranslucent">true</item>
219+
</style>
220+
</resources>
221+
```
222+
223+
**To learn more see [examples](https://github.com/crazycodeboy/react-native-splash-screen/tree/master/examples)**
224+
225+
226+
If you want to customize the color of the status bar when the splash screen is displayed:
227+
228+
Create `android/app/src/main/res/values/colors.xml` and add
229+
```xml
230+
<?xml version="1.0" encoding="utf-8"?>
231+
<resources>
232+
<color name="status_bar_color"><!-- Colour of your status bar here --></color>
233+
</resources>
234+
```
235+
236+
Create a style definition for this in `android/app/src/main/res/values/styles.xml`:
237+
```xml
238+
<?xml version="1.0" encoding="utf-8"?>
239+
<resources>
240+
<style name="SplashScreenTheme" parent="SplashScreen_SplashTheme">
241+
<item name="colorPrimaryDark">@color/status_bar_color</item>
242+
</style>
243+
</resources>
244+
```
245+
246+
Change your `show` method to include your custom style:
247+
```java
248+
SplashScreen.show(this, R.style.SplashScreenTheme);
249+
```
250+
251+
### iOS
252+
253+
Customize your splash screen via `LaunchScreen.storyboard` or `LaunchScreen.xib`。
254+
255+
**Learn more to see [examples](https://github.com/crazycodeboy/react-native-splash-screen/tree/master/examples)**
256+
257+
- [via LaunchScreen.storyboard Tutorial](https://github.com/crazycodeboy/react-native-splash-screen/blob/master/add-LaunchScreen-tutorial-for-ios.md)
258+
259+
260+
## Usage
261+
262+
Use like so:
263+
264+
```javascript
265+
import SplashScreen from 'react-native-splash-screen'
266+
267+
export default class WelcomePage extends Component {
268+
269+
componentDidMount() {
270+
// do stuff while splash screen is shown
271+
// After having done stuff (such as async tasks) hide the splash screen
272+
SplashScreen.hide();
273+
}
274+
}
275+
```
276+
277+
## API
278+
279+
280+
| Method | Type | Optional | Description |
281+
|--------|----------|----------|-------------------------------------|
282+
| show() | function | false | Open splash screen (Native Method ) |
283+
| show(final Activity activity, final boolean fullScreen) | function | false | Open splash screen (Native Method ) |
284+
| hide() | function | false | Close splash screen |
285+
286+
## Testing
287+
288+
### Jest
289+
290+
For Jest to work you will need to mock this component. Here is an example:
291+
292+
```
293+
// __mocks__/react-native-splash-screen.js
294+
export default {
295+
show: jest.fn().mockImplementation( () => { console.log('show splash screen'); } ),
296+
hide: jest.fn().mockImplementation( () => { console.log('hide splash screen'); } ),
297+
}
298+
```
299+
300+
## Troubleshooting
301+
302+
### Splash screen always appears stretched/distorted
303+
Add the ImageView with a scaleType in the `launch_screen.xml`, e.g.:
304+
```
305+
<?xml version="1.0" encoding="utf-8"?>
306+
<FrameLayout
307+
xmlns:android="http://schemas.android.com/apk/res/android"
308+
android:layout_width="match_parent"
309+
android:layout_height="match_parent"
310+
android:orientation="vertical"
311+
>
312+
<ImageView
313+
android:src="@drawable/launch_screen"
314+
android:layout_width="match_parent"
315+
android:layout_height="match_parent"
316+
android:scaleType="centerCrop"
317+
>
318+
</ImageView>
319+
</FrameLayout>
320+
```
321+
322+
## Contribution
323+
324+
Issues are welcome. Please add a screenshot of you bug and a code snippet. Quickest way to solve issue is to reproduce it in one of the examples.
325+
326+
Pull requests are welcome. If you want to change the API or do something big it is best to create an issue and discuss it first.
327+
328+
---
329+
330+
**[MIT Licensed](https://github.com/crazycodeboy/react-native-splash-screen/blob/master/LICENSE)**

0 commit comments

Comments
 (0)