Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
万松
react-native-splash-screen
Commits
bde55b70
Commit
bde55b70
authored
8 years ago
by
crazycodeoby
Browse files
Options
Download
Email Patches
Plain Diff
add README.zh.md
parent
a59c56a6
Changes
3
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
README.md
+3
-0
README.md
README.zh.md
+189
-0
README.zh.md
examples/Screenshots/China.png
+0
-0
examples/Screenshots/China.png
with
192 additions
and
0 deletions
+192
-0
README.md
View file @
bde55b70
# react-native-splash-screen
[简体中文](/README.zh.md)
A splash screen for react-native, hide when application loaded ,it works on iOS and Android.
## Content
...
...
This diff is collapsed.
Click to expand it.
README.zh.md
0 → 100644
View file @
bde55b70
# react-native-splash-screen
[
English
](
README.md
)
React Native启动屏,解决iOS,Android启动白屏问题,支持Android和iOS。
## Content
-
[
安装说明
](
#安装说明
)
-
[
演示
](
#演示
)
-
[
使用说明
](
#使用说明
)
-
[
API
](
#api
)
-
[
贡献
](
#贡献
)
## 安装说明
### 第一步(下载):
在项目根目录打开终端运行
`npm i react-native-splash-screen --save`
### 第二步 (安装):
大家可以通过自动或手动两种方式来安装
`react-native-splash-screen`
。
#### 自动安装
终端运行:
`react-native link react-native-splash-screen`
or
`rnpm link react-native-splash-screen`
#### 手动安装
**Android:**
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 文件中添加
`:react-native-splash-screen`
:
代码如下:
```
...
dependencies {
...
compile project(':react-native-splash-screen')
}
```
3.
更新你的MainApplication.java 文件,如下:
```
java
public
class
MainApplication
extends
Application
implements
ReactApplication
{
private
final
ReactNativeHost
mReactNativeHost
=
new
ReactNativeHost
(
this
)
{
@Override
protected
boolean
getUseDeveloperSupport
()
{
return
BuildConfig
.
DEBUG
;
}
@Override
protected
List
<
ReactPackage
>
getPackages
()
{
return
Arrays
.<
ReactPackage
>
asList
(
new
MainReactPackage
(),
new
SplashScreenReactPackage
()
//here
);
}
};
@Override
public
ReactNativeHost
getReactNativeHost
()
{
return
mReactNativeHost
;
}
}
```
**iOS:**
1.
在 XCode的项目导航视图中单击
`Libraries`
➜
`Add Files to [your project's name]`
2.
通过下面路径找到
`SplashScreen.xcodeproj`
,
`node_modules`
➜
`react-native-launch-image`
➜
`SplashScreen.xcodeproj`
3.
在XCode中打开
`Build Phases`
➜
`Link Binary With Libraries`
将
`libSplashScreen.a`
添加到你的项目中。
### 第三步(配置):
**Android:**
更新你的 MainActivity.java 文件如下:
```
java
public
class
MainActivity
extends
ReactActivity
{
@Override
protected
void
onCreate
(
Bundle
savedInstanceState
)
{
SplashScreen
.
show
(
this
);
// 添加这一句
super
.
onCreate
(
savedInstanceState
);
}
// ...other code
}
```
**iOS:**
更新你的AppDelegate.m 文件如下:
```
obj-c
#import "AppDelegate.h"
#import "RCTRootView.h"
#import "SplashScreen.h" // here
@implementation
AppDelegate
-
(
BOOL
)
application
:(
UIApplication
*
)
application
didFinishLaunchingWithOptions
:(
NSDictionary
*
)
launchOptions
{
// ...other code
[
SplashScreen
show
];
// 添加这一句,这一句一定要在最后
return
YES
;
}
@end
```
## Demo
*
[
Examples
](
https://github.com/crazycodeboy/react-native-splash-screen/tree/master/examples
)


## 使用说明
讲
`react-native-splash-screen`
导入你的JS 文件。
`import SplashScreen from 'react-native-splash-screen'`
**Android:**
创建一个名为 launch_screen.xml 的布局文件来自定义你的启动屏幕。
```
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android=
"http://schemas.android.com/apk/res/android"
android:orientation=
"vertical"
android:layout_width=
"match_parent"
android:layout_height=
"match_parent"
android:background=
"@drawable/launch_screen"
>
</LinearLayout>
```
**iOS**
iOS可以通过LaunchImage或LaunchScreen.xib来自定义你的启动屏幕。
最后,你可以在适当的时候关闭启动屏幕(如:启动初始化完成后):
```
JavaScript
import SplashScreen from 'react-native-splash-screen'
export default class WelcomePage extends Component {
componentDidMount() {
// do anything while splash screen keeps, use await to wait for an async task.
SplashScreen.hide();//关闭启动屏幕
}
}
```
## API
方法 | 类型 | 可选 | 描述
----------------- | -------- | -------- | -----------
show() | function | false | 打开启动屏幕
hide() | function | false | 关闭启动屏幕
## 贡献
欢迎大家提问题,如果能给问题加上一个截图,则是极好的。另外欢迎
`Pull requests`
贡献你的代码。
---
**MIT Licensed**
This diff is collapsed.
Click to expand it.
examples/Screenshots/China.png
0 → 100644
View file @
bde55b70
845 Bytes
This diff is collapsed.
Click to expand it.
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment
Menu
Projects
Groups
Snippets
Help