Skip to content

Commit d4e860d

Browse files
committed
[feat] 更新文档和教程
1 parent d4ab6ca commit d4e860d

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

64 files changed

+8272
-11903
lines changed

.npmignore

+3-1
Original file line numberDiff line numberDiff line change
@@ -28,4 +28,6 @@ DerivedData
2828
#
2929
node_modules/
3030
npm-debug.log
31-
examples/
31+
examples/
32+
screenshot/
33+
*.md

README.md

+9-1
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,11 @@ public class MainApplication extends Application implements ReactApplication {
9999

100100
**iOS:**
101101

102+
1. `cd ios`
103+
2. `run pod install`
104+
105+
>OR
106+
102107
1. In XCode, in the project navigator, right click `Libraries``Add Files to [your project's name]`
103108
2. Go to `node_modules``react-native-splash-screen` and add `SplashScreen.xcodeproj`
104109
3. In XCode, in the project navigator, select your project. Add `libSplashScreen.a` to your project's `Build Phases``Link Binary With Libraries`
@@ -245,10 +250,13 @@ SplashScreen.show(this, R.style.SplashScreenTheme);
245250

246251
### iOS
247252

248-
Customize your splash screen via `LaunchImage` or `LaunchScreen.xib`,
253+
Customize your splash screen via `LaunchScreen.storyboard` or `LaunchScreen.xib`
249254

250255
**Learn more to see [examples](https://github.com/crazycodeboy/react-native-splash-screen/tree/master/examples)**
251256

257+
- [via LaunchScreen.storyboard Tutorial](https://github.com/crazycodeboy/react-native-splash-screen/blob/master/add-LaunchScreen-tutorial-for-ios.md)
258+
259+
252260
## Usage
253261

254262
Use like so:

README.zh.md

+11-11
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
[![Download](https://img.shields.io/badge/Download-v3.1.1-ff69b4.svg) ](https://www.npmjs.com/package/react-native-splash-screen)
44
[ ![PRs Welcome](https://img.shields.io/badge/PRs-Welcome-brightgreen.svg)](https://github.com/crazycodeboy/react-native-splash-screen/pulls)
55
[ ![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)
6-
[ ![language English](https://img.shields.io/badge/language-English-feb252.svg)](https://github.com/crazycodeboy/GitHubPopular/)
6+
[ ![language English](https://img.shields.io/badge/language-English-feb252.svg)](https://github.com/crazycodeboy/GitHubPopular/)
77
[![License MIT](http://img.shields.io/badge/license-MIT-orange.svg?style=flat)](https://raw.githubusercontent.com/crazycodeboy/react-native-check-box/master/LICENSE)
88
[ ![原理 解析](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)
99

@@ -20,7 +20,7 @@ React Native启动屏,解决iOS,Android启动白屏问题,支持Android和
2020
- [贡献](#贡献)
2121
- [改变](#改变)
2222

23-
## 演示
23+
## 演示
2424
* [Examples](https://github.com/crazycodeboy/react-native-splash-screen/tree/master/examples)
2525

2626
![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)
@@ -55,7 +55,7 @@ React Native启动屏,解决iOS,Android启动白屏问题,支持Android和
5555

5656
1.在你的 android/settings.gradle 文件中添加下列代码:
5757
```
58-
include ':react-native-splash-screen'
58+
include ':react-native-splash-screen'
5959
project(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android')
6060
```
6161

@@ -71,7 +71,7 @@ dependencies {
7171
}
7272
```
7373

74-
3.更新你的MainApplication.java 文件,如下:
74+
3.更新你的MainApplication.java 文件,如下:
7575

7676
```java
7777
public class MainApplication extends Application implements ReactApplication {
@@ -106,9 +106,9 @@ public class MainApplication extends Application implements ReactApplication {
106106
3. 在XCode中打开`Build Phases``Link Binary With Libraries``libSplashScreen.a` 添加到你的项目中。
107107
4. 如果在使用过过程中出现 `'SplashScreen.h' file not found`问题,你可以下面的代码添加到Header Search Paths中,步骤如下:
108108

109-
109+
110110
选择你的项目,TARGET → Build Settings → Search Paths → Header Search Paths 添加:
111-
111+
112112
`$(SRCROOT)/../node_modules/react-native-splash-screen/ios`
113113

114114

@@ -155,12 +155,12 @@ public class MainActivity extends ReactActivity {
155155
```
156156
157157
158-
## 使用说明
158+
## 使用说明
159159
160160
将 `react-native-splash-screen` 导入你的JS 文件。
161161
162162
163-
`import SplashScreen from 'react-native-splash-screen'`
163+
`import SplashScreen from 'react-native-splash-screen'`
164164
165165
**Android:**
166166
@@ -195,9 +195,9 @@ public class MainActivity extends ReactActivity {
195195

196196
**更详细的介绍,可以查看 [examples](https://github.com/crazycodeboy/react-native-splash-screen/tree/master/examples)**
197197

198-
**iOS**
198+
**iOS**
199199

200-
iOS可以通过LaunchImage或LaunchScreen.xib来自定义你的启动屏幕。
200+
iOS可以通过LaunchScreen.storyboard或LaunchScreen.xib来自定义你的启动屏幕。
201201

202202
**更详细的介绍,可以查看 [examples](https://github.com/crazycodeboy/react-native-splash-screen/tree/master/examples)**
203203

@@ -221,7 +221,7 @@ export default class WelcomePage extends Component {
221221
方法 | 类型 | 可选 | 描述
222222
----------------- | -------- | -------- | -----------
223223
show()   | function | false | 打开启动屏幕(原生方法)
224-
hide() | function | false | 关闭启动屏幕
224+
hide() | function | false | 关闭启动屏幕
225225

226226
## 贡献
227227

add-LaunchScreen-tutorial-for-ios.md

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
在新版Xcode 中 而LaunchImage已经退出了历史的舞台,要为iOS APP添加启动屏可以通过LaunchScreen.storyboard 或 LaunchScreen.xib两种方式,两种方式思路相同,接下来就介绍下如何通过LaunchScreen.storyboard 来为RN应用添加启动屏。
2+
3+
## 步骤
4+
5+
1. 创建LaunchScreen.storyboard
6+
2. 创建LaunchScreen Image Set
7+
3. 在LaunchScreen.storyboard中添加ImageView并绑定LaunchScreen Image
8+
4. 应用LaunchScreen.storyboard
9+
5. 删除APP,重新运行
10+
11+
### 创建LaunchScreen.storyboard
12+
13+
RN创建的项目默认是不带LaunchScreen.storyboard的,所以我们需要手动创建,用xcode打开项目下的iOS项目然后在左侧文件导航面板右键选择新建文件:
14+
15+
![new-LaunchScreen-storyboard.jpg](https://raw.githubusercontent.com/crazycodeboy/react-native-splash-screen/master/screenshot/new-LaunchScreen-storyboard.jpg)
16+
17+
18+
### 创建LaunchScreen Image Set
19+
20+
打开`Images.xcassets`然后添加名为`LaunchScreen`的Image Set:
21+
22+
![new-LaunchScreen-image-set.jpg](https://raw.githubusercontent.com/crazycodeboy/react-native-splash-screen/master/screenshot/new-LaunchScreen-image-set.jpg)
23+
24+
### 在LaunchScreen.storyboard中添加ImageView并绑定LaunchScreen Image
25+
26+
打开`LaunchScreen.storyboard`,然后添加一个ImageView,调整好大小与约束,在为其绑定LaunchScreen Image Set:
27+
28+
![apply-image-set.jpg](https://raw.githubusercontent.com/crazycodeboy/react-native-splash-screen/master/screenshot/apply-image-set.jpg)
29+
30+
### 应用LaunchScreen.storyboard
31+
32+
然后不要忘记在TARGETS中设置`Launch Screen File`
33+
34+
![apply-Launchscreen.jpg](https://raw.githubusercontent.com/crazycodeboy/react-native-splash-screen/master/screenshot/apply-Launchscreen.jpg)

examples/.babelrc

-3
This file was deleted.

examples/.eslintrc.js

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
module.exports = {
2+
root: true,
3+
extends: '@react-native-community',
4+
};

examples/.flowconfig

+43-36
Original file line numberDiff line numberDiff line change
@@ -5,63 +5,70 @@
55
; Ignore "BUCK" generated dirs
66
<PROJECT_ROOT>/\.buckd/
77

8-
; Ignore unexpected extra "@providesModule"
9-
.*/node_modules/.*/node_modules/fbjs/.*
8+
; Ignore polyfills
9+
node_modules/react-native/Libraries/polyfills/.*
1010

11-
; Ignore duplicate module providers
12-
; For RN Apps installed via npm, "Libraries" folder is inside
13-
; "node_modules/react-native" but in the source repo it is in the root
14-
.*/Libraries/react-native/React.js
11+
; These should not be required directly
12+
; require from fbjs/lib instead: require('fbjs/lib/warning')
13+
node_modules/warning/.*
1514

16-
; Ignore polyfills
17-
.*/Libraries/polyfills/.*
15+
; Flow doesn't support platforms
16+
.*/Libraries/Utilities/LoadingView.js
1817

19-
; Ignore metro
20-
.*/node_modules/metro/.*
18+
[untyped]
19+
.*/node_modules/@react-native-community/cli/.*/.*
2120

2221
[include]
2322

2423
[libs]
25-
node_modules/react-native/Libraries/react-native/react-native-interface.js
24+
node_modules/react-native/interface.js
2625
node_modules/react-native/flow/
27-
node_modules/react-native/flow-github/
2826

2927
[options]
3028
emoji=true
3129

32-
module.system=haste
33-
module.system.haste.use_name_reducers=true
34-
# get basename
35-
module.system.haste.name_reducers='^.*/\([a-zA-Z0-9$_.-]+\.js\(\.flow\)?\)$' -> '\1'
36-
# strip .js or .js.flow suffix
37-
module.system.haste.name_reducers='^\(.*\)\.js\(\.flow\)?$' -> '\1'
38-
# strip .ios suffix
39-
module.system.haste.name_reducers='^\(.*\)\.ios$' -> '\1'
40-
module.system.haste.name_reducers='^\(.*\)\.android$' -> '\1'
41-
module.system.haste.name_reducers='^\(.*\)\.native$' -> '\1'
42-
module.system.haste.paths.blacklist=.*/__tests__/.*
43-
module.system.haste.paths.blacklist=.*/__mocks__/.*
44-
module.system.haste.paths.blacklist=<PROJECT_ROOT>/node_modules/react-native/Libraries/Animated/src/polyfills/.*
45-
module.system.haste.paths.whitelist=<PROJECT_ROOT>/node_modules/react-native/Libraries/.*
46-
47-
munge_underscores=true
48-
49-
module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'
30+
esproposal.optional_chaining=enable
31+
esproposal.nullish_coalescing=enable
5032

5133
module.file_ext=.js
52-
module.file_ext=.jsx
5334
module.file_ext=.json
54-
module.file_ext=.native.js
35+
module.file_ext=.ios.js
36+
37+
munge_underscores=true
38+
39+
module.name_mapper='^react-native/\(.*\)$' -> '<PROJECT_ROOT>/node_modules/react-native/\1'
40+
module.name_mapper='^@?[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> '<PROJECT_ROOT>/node_modules/react-native/Libraries/Image/RelativeImageStub'
5541

5642
suppress_type=$FlowIssue
5743
suppress_type=$FlowFixMe
5844
suppress_type=$FlowFixMeProps
5945
suppress_type=$FlowFixMeState
6046

61-
suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
62-
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
63-
suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
47+
suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native\\(_ios\\)?_\\(oss\\|fb\\)[a-z,_]*\\)?)\\)
48+
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native\\(_ios\\)?_\\(oss\\|fb\\)[a-z,_]*\\)?)\\)?:? #[0-9]+
6449
suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
6550

51+
[lints]
52+
sketchy-null-number=warn
53+
sketchy-null-mixed=warn
54+
sketchy-number=warn
55+
untyped-type-import=warn
56+
nonstrict-import=warn
57+
deprecated-type=warn
58+
unsafe-getters-setters=warn
59+
inexact-spread=warn
60+
unnecessary-invariant=warn
61+
signature-verification-failure=warn
62+
deprecated-utility=error
63+
64+
[strict]
65+
deprecated-type
66+
nonstrict-import
67+
sketchy-null
68+
unclear-type
69+
unsafe-getters-setters
70+
untyped-import
71+
untyped-type-import
72+
6673
[version]
67-
^0.75.0
74+
^0.113.0

examples/.gitignore

+4-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ DerivedData
2020
*.hmap
2121
*.ipa
2222
*.xcuserstate
23-
project.xcworkspace
2423

2524
# Android/IntelliJ
2625
#
@@ -40,6 +39,7 @@ yarn-error.log
4039
buck-out/
4140
\.buckd/
4241
*.keystore
42+
!debug.keystore
4343

4444
# fastlane
4545
#
@@ -54,3 +54,6 @@ buck-out/
5454

5555
# Bundle artifact
5656
*.jsbundle
57+
58+
# CocoaPods
59+
/ios/Pods/

examples/.prettierrc.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
bracketSpacing: false,
3+
jsxBracketSameLine: true,
4+
singleQuote: true,
5+
trailingComma: 'all',
6+
};

examples/App.js

+16-16
Original file line numberDiff line numberDiff line change
@@ -32,23 +32,23 @@ export default class example extends Component {
3232
<TouchableOpacity
3333
style={styles.container}
3434
onPress={(e)=> {
35-
Linking.openURL('http://www.devio.org/');
35+
Linking.openURL('https://coding.imooc.com/class/304.html');
3636
}}
3737
>
38-
<View >
39-
<Text style={styles.item}>
40-
SplashScreen 启动屏
41-
</Text>
42-
<Text style={styles.item}>
43-
@:http://www.devio.org/
44-
</Text>
45-
<Text style={styles.item}>
46-
GitHub:https://github.com/crazycodeboy
47-
</Text>
48-
<Text style={styles.item}>
49-
50-
</Text>
51-
</View>
38+
<View >
39+
<Text style={styles.item}>
40+
SplashScreen 启动屏
41+
</Text>
42+
<Text style={styles.item}>
43+
@:http://www.devio.org/
44+
</Text>
45+
<Text style={styles.item}>
46+
GitHub:https://github.com/crazycodeboy
47+
</Text>
48+
<Text style={styles.item}>
49+
50+
</Text>
51+
</View>
5252
</TouchableOpacity>
5353
)
5454
}
@@ -69,4 +69,4 @@ const styles = StyleSheet.create({
6969
height: 0.3,
7070
backgroundColor: 'darkgray',
7171
},
72-
})
72+
})

examples/__tests__/App-test.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
/**
2+
* @format
3+
*/
4+
5+
import 'react-native';
6+
import React from 'react';
7+
import App from '../App';
8+
9+
// Note: test renderer must be required after react-native.
10+
import renderer from 'react-test-renderer';
11+
12+
it('renders correctly', () => {
13+
renderer.create(<App />);
14+
});

examples/android/app/BUCK

+4-14
Original file line numberDiff line numberDiff line change
@@ -8,23 +8,13 @@
88
# - `buck install -r android/app` - compile, install and run application
99
#
1010

11+
load(":build_defs.bzl", "create_aar_targets", "create_jar_targets")
12+
1113
lib_deps = []
1214

13-
for jarfile in glob(['libs/*.jar']):
14-
name = 'jars__' + jarfile[jarfile.rindex('/') + 1: jarfile.rindex('.jar')]
15-
lib_deps.append(':' + name)
16-
prebuilt_jar(
17-
name = name,
18-
binary_jar = jarfile,
19-
)
15+
create_aar_targets(glob(["libs/*.aar"]))
2016

21-
for aarfile in glob(['libs/*.aar']):
22-
name = 'aars__' + aarfile[aarfile.rindex('/') + 1: aarfile.rindex('.aar')]
23-
lib_deps.append(':' + name)
24-
android_prebuilt_aar(
25-
name = name,
26-
aar = aarfile,
27-
)
17+
create_jar_targets(glob(["libs/*.jar"]))
2818

2919
android_library(
3020
name = "all-libs",

0 commit comments

Comments
 (0)