Commit bde55b70 authored by crazycodeoby's avatar crazycodeoby
Browse files

add README.zh.md

parent a59c56a6
Showing with 192 additions and 0 deletions
+192 -0
# react-native-splash-screen
![China.png]()[简体中文](/README.zh.md)
A splash screen for react-native, hide when application loaded ,it works on iOS and Android.
## Content
......
# 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-Android](https://raw.githubusercontent.com/crazycodeboy/react-native-splash-screen/master/examples/Screenshots/react-native-splash-screen-Android.gif)
![react-native-splash-screen-iOS](https://raw.githubusercontent.com/crazycodeboy/react-native-splash-screen/master/examples/Screenshots/react-native-splash-screen-iOS.gif)
## 使用说明
`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**
examples/Screenshots/China.png

845 Bytes

Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment