Skip to content

Commit bde55b7

Browse files
committed
add README.zh.md
1 parent a59c56a commit bde55b7

File tree

3 files changed

+192
-0
lines changed

3 files changed

+192
-0
lines changed

README.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
# react-native-splash-screen
2+
3+
![China.png]()[简体中文](/README.zh.md)
4+
25
A splash screen for react-native, hide when application loaded ,it works on iOS and Android.
36

47
## Content

README.zh.md

Lines changed: 189 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,189 @@
1+
# react-native-splash-screen
2+
3+
[English](README.md)
4+
5+
React Native启动屏,解决iOS,Android启动白屏问题,支持Android和iOS。
6+
7+
## Content
8+
9+
- [安装说明](#安装说明)
10+
- [演示](#演示)
11+
- [使用说明](#使用说明)
12+
- [API](#api)
13+
- [贡献](#贡献)
14+
15+
## 安装说明
16+
17+
### 第一步(下载):
18+
在项目根目录打开终端运行 `npm i react-native-splash-screen --save`
19+
20+
### 第二步 (安装):
21+
22+
大家可以通过自动或手动两种方式来安装`react-native-splash-screen`
23+
24+
25+
#### 自动安装
26+
27+
终端运行:
28+
29+
30+
`react-native link react-native-splash-screen` or `rnpm link react-native-splash-screen`
31+
32+
#### 手动安装
33+
34+
**Android:**
35+
36+
1.在你的 android/settings.gradle 文件中添加下列代码:
37+
```
38+
include ':react-native-splash-screen'
39+
project(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android')
40+
```
41+
42+
2.在你的 android/app/build.gradle 文件中添加 `:react-native-splash-screen`
43+
44+
代码如下:
45+
46+
```
47+
...
48+
dependencies {
49+
...
50+
compile project(':react-native-splash-screen')
51+
}
52+
```
53+
54+
3.更新你的MainApplication.java 文件,如下:
55+
56+
```java
57+
public class MainApplication extends Application implements ReactApplication {
58+
59+
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
60+
@Override
61+
protected boolean getUseDeveloperSupport() {
62+
return BuildConfig.DEBUG;
63+
}
64+
65+
@Override
66+
protected List<ReactPackage> getPackages() {
67+
return Arrays.<ReactPackage>asList(
68+
new MainReactPackage(),
69+
new SplashScreenReactPackage() //here
70+
);
71+
}
72+
};
73+
74+
@Override
75+
public ReactNativeHost getReactNativeHost() {
76+
return mReactNativeHost;
77+
}
78+
}
79+
```
80+
81+
**iOS:**
82+
83+
1. 在 XCode的项目导航视图中单击 `Libraries``Add Files to [your project's name]`
84+
2. 通过下面路径找到 `SplashScreen.xcodeproj`,`node_modules``react-native-launch-image``SplashScreen.xcodeproj`
85+
86+
3. 在XCode中打开`Build Phases``Link Binary With Libraries``libSplashScreen.a` 添加到你的项目中。
87+
88+
89+
90+
### 第三步(配置):
91+
92+
**Android:**
93+
94+
更新你的 MainActivity.java 文件如下:
95+
```java
96+
public class MainActivity extends ReactActivity {
97+
@Override
98+
protected void onCreate(Bundle savedInstanceState) {
99+
SplashScreen.show(this); // 添加这一句
100+
super.onCreate(savedInstanceState);
101+
}
102+
// ...other code
103+
}
104+
```
105+
106+
**iOS:**
107+
108+
更新你的AppDelegate.m 文件如下:
109+
110+
111+
```obj-c
112+
113+
#import "AppDelegate.h"
114+
#import "RCTRootView.h"
115+
#import "SplashScreen.h" // here
116+
117+
@implementation AppDelegate
118+
119+
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
120+
{
121+
// ...other code
122+
123+
[SplashScreen show]; // 添加这一句,这一句一定要在最后
124+
return YES;
125+
}
126+
127+
@end
128+
129+
```
130+
131+
## Demo
132+
* [Examples](https://github.com/crazycodeboy/react-native-splash-screen/tree/master/examples)
133+
134+
![react-native-splash-screen-Android](https://raw.githubusercontent.com/crazycodeboy/react-native-splash-screen/master/examples/Screenshots/react-native-splash-screen-Android.gif)
135+
![react-native-splash-screen-iOS](https://raw.githubusercontent.com/crazycodeboy/react-native-splash-screen/master/examples/Screenshots/react-native-splash-screen-iOS.gif)
136+
137+
## 使用说明
138+
139+
讲 `react-native-splash-screen` 导入你的JS 文件。
140+
141+
142+
`import SplashScreen from 'react-native-splash-screen'`
143+
144+
**Android:**
145+
146+
创建一个名为 launch_screen.xml 的布局文件来自定义你的启动屏幕。
147+
148+
```
149+
<?xml version="1.0" encoding="utf-8"?>
150+
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
151+
android:orientation="vertical" android:layout_width="match_parent"
152+
android:layout_height="match_parent"
153+
android:background="@drawable/launch_screen">
154+
</LinearLayout>
155+
```
156+
157+
**iOS**
158+
159+
iOS可以通过LaunchImage或LaunchScreen.xib来自定义你的启动屏幕。
160+
161+
最后,你可以在适当的时候关闭启动屏幕(如:启动初始化完成后):
162+
163+
```JavaScript
164+
import SplashScreen from 'react-native-splash-screen'
165+
166+
export default class WelcomePage extends Component {
167+
168+
componentDidMount() {
169+
// do anything while splash screen keeps, use await to wait for an async task.
170+
SplashScreen.hide();//关闭启动屏幕
171+
}
172+
}
173+
```
174+
175+
## API
176+
177+
178+
方法 | 类型 | 可选 | 描述
179+
----------------- | -------- | -------- | -----------
180+
show() | function | false | 打开启动屏幕
181+
hide() | function | false | 关闭启动屏幕
182+
183+
## 贡献
184+
185+
欢迎大家提问题,如果能给问题加上一个截图,则是极好的。另外欢迎`Pull requests`贡献你的代码。
186+
187+
---
188+
189+
**MIT Licensed**

examples/Screenshots/China.png

845 Bytes
Loading

0 commit comments

Comments
 (0)