[feat] 更新文档和教程

Author: crazycodeboy

.npmignore

@@ -28,4 +28,6 @@ DerivedData
 #
 node_modules/
 npm-debug.log
-examples/
+examples/
+screenshot/
+*.md

README.md

@@ -99,6 +99,11 @@ public class MainApplication extends Application implements ReactApplication {
 
 **iOS:**
 
+1. `cd ios`
+2. `run pod install`
+
+>OR
+
 1. In XCode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]`
 2. Go to `node_modules` ➜ `react-native-splash-screen` and add `SplashScreen.xcodeproj`
 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);
 
 ### iOS    
 
-Customize your splash screen via `LaunchImage` or `LaunchScreen.xib`,
+Customize your splash screen via `LaunchScreen.storyboard` or `LaunchScreen.xib`。
 
 **Learn more to see [examples](https://github.com/crazycodeboy/react-native-splash-screen/tree/master/examples)**
 
+- [via LaunchScreen.storyboard Tutorial](https://github.com/crazycodeboy/react-native-splash-screen/blob/master/add-LaunchScreen-tutorial-for-ios.md)
+
+
 ## Usage
 
 Use like so:

README.zh.md

@@ -3,7 +3,7 @@
 [![Download](https://img.shields.io/badge/Download-v3.1.1-ff69b4.svg) ](https://www.npmjs.com/package/react-native-splash-screen)
 [ ![PRs Welcome](https://img.shields.io/badge/PRs-Welcome-brightgreen.svg)](https://github.com/crazycodeboy/react-native-splash-screen/pulls)
 [ ![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)
-[ ![language English](https://img.shields.io/badge/language-English-feb252.svg)](https://github.com/crazycodeboy/GitHubPopular/) 
+[ ![language English](https://img.shields.io/badge/language-English-feb252.svg)](https://github.com/crazycodeboy/GitHubPopular/)
 [![License MIT](http://img.shields.io/badge/license-MIT-orange.svg?style=flat)](https://raw.githubusercontent.com/crazycodeboy/react-native-check-box/master/LICENSE)
 [ ![原理 解析](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)
 
@@ -20,7 +20,7 @@ React Native启动屏，解决iOS，Android启动白屏问题，支持Android和
 - [贡献](#贡献)
 - [改变](#改变)
 
-## 演示  
+## 演示
 * [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/v3.0.0/examples/Screenshots/react-native-splash-screen-Android.gif)
@@ -55,7 +55,7 @@ React Native启动屏，解决iOS，Android启动白屏问题，支持Android和
 
 1.在你的 android/settings.gradle 文件中添加下列代码:
 ```
-include ':react-native-splash-screen'   
+include ':react-native-splash-screen'
 project(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android')
 ```
 
@@ -71,7 +71,7 @@ dependencies {
 }
 ```
 
-3.更新你的MainApplication.java 文件，如下:   
+3.更新你的MainApplication.java 文件，如下:
 
 ```java
 public class MainApplication extends Application implements ReactApplication {
@@ -106,9 +106,9 @@ public class MainApplication extends Application implements ReactApplication {
 3.  在XCode中打开`Build Phases` ➜ `Link Binary With Libraries`将`libSplashScreen.a` 添加到你的项目中。
 4.  如果在使用过过程中出现 `'SplashScreen.h' file not found`问题,你可以下面的代码添加到Header Search Paths中,步骤如下:
 
- 
+
 选择你的项目,TARGET  → Build Settings → Search Paths → Header Search Paths 添加:
-      
+
       `$(SRCROOT)/../node_modules/react-native-splash-screen/ios`
 
 
@@ -155,12 +155,12 @@ public class MainActivity extends ReactActivity {
 ```
 
 
-## 使用说明  
+## 使用说明
 
 将 `react-native-splash-screen` 导入你的JS 文件。
 
 
-`import SplashScreen from 'react-native-splash-screen'`    
+`import SplashScreen from 'react-native-splash-screen'`
 
 **Android:**
 
@@ -195,9 +195,9 @@ public class MainActivity extends ReactActivity {
 
 **更详细的介绍，可以查看 [examples](https://github.com/crazycodeboy/react-native-splash-screen/tree/master/examples)**
 
-**iOS**  
+**iOS**
 
-iOS可以通过LaunchImage或LaunchScreen.xib来自定义你的启动屏幕。
+iOS可以通过LaunchScreen.storyboard或LaunchScreen.xib来自定义你的启动屏幕。
 
 **更详细的介绍，可以查看 [examples](https://github.com/crazycodeboy/react-native-splash-screen/tree/master/examples)**
 
@@ -221,7 +221,7 @@ export default class WelcomePage extends Component {
 方法            | 类型     | 可选 | 描述
 ----------------- | -------- | -------- | -----------
 show()   | function | false | 打开启动屏幕(原生方法)
-hide() |  function  | false  |  关闭启动屏幕   
+hide() |  function  | false  |  关闭启动屏幕
 
 ## 贡献
 

add-LaunchScreen-tutorial-for-ios.md

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

examples/.babelrc

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: '@react-native-community',
+};

examples/.eslintrc.js

@@ -5,63 +5,70 @@
 ; Ignore "BUCK" generated dirs
 <PROJECT_ROOT>/\.buckd/
 
-; Ignore unexpected extra "@providesModule"
-.*/node_modules/.*/node_modules/fbjs/.*
+; Ignore polyfills
+node_modules/react-native/Libraries/polyfills/.*
 
-; Ignore duplicate module providers
-; For RN Apps installed via npm, "Libraries" folder is inside
-; "node_modules/react-native" but in the source repo it is in the root
-.*/Libraries/react-native/React.js
+; These should not be required directly
+; require from fbjs/lib instead: require('fbjs/lib/warning')
+node_modules/warning/.*
 
-; Ignore polyfills
-.*/Libraries/polyfills/.*
+; Flow doesn't support platforms
+.*/Libraries/Utilities/LoadingView.js
 
-; Ignore metro
-.*/node_modules/metro/.*
+[untyped]
+.*/node_modules/@react-native-community/cli/.*/.*
 
 [include]
 
 [libs]
-node_modules/react-native/Libraries/react-native/react-native-interface.js
+node_modules/react-native/interface.js
 node_modules/react-native/flow/
-node_modules/react-native/flow-github/
 
 [options]
 emoji=true
 
-module.system=haste
-module.system.haste.use_name_reducers=true
-# get basename
-module.system.haste.name_reducers='^.*/\([a-zA-Z0-9$_.-]+\.js\(\.flow\)?\)$' -> '\1'
-# strip .js or .js.flow suffix
-module.system.haste.name_reducers='^\(.*\)\.js\(\.flow\)?$' -> '\1'
-# strip .ios suffix
-module.system.haste.name_reducers='^\(.*\)\.ios$' -> '\1'
-module.system.haste.name_reducers='^\(.*\)\.android$' -> '\1'
-module.system.haste.name_reducers='^\(.*\)\.native$' -> '\1'
-module.system.haste.paths.blacklist=.*/__tests__/.*
-module.system.haste.paths.blacklist=.*/__mocks__/.*
-module.system.haste.paths.blacklist=<PROJECT_ROOT>/node_modules/react-native/Libraries/Animated/src/polyfills/.*
-module.system.haste.paths.whitelist=<PROJECT_ROOT>/node_modules/react-native/Libraries/.*
-
-munge_underscores=true
-
-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'
+esproposal.optional_chaining=enable
+esproposal.nullish_coalescing=enable
 
 module.file_ext=.js
-module.file_ext=.jsx
 module.file_ext=.json
-module.file_ext=.native.js
+module.file_ext=.ios.js
+
+munge_underscores=true
+
+module.name_mapper='^react-native/\(.*\)$' -> '<PROJECT_ROOT>/node_modules/react-native/\1'
+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'
 
 suppress_type=$FlowIssue
 suppress_type=$FlowFixMe
 suppress_type=$FlowFixMeProps
 suppress_type=$FlowFixMeState
 
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native\\(_ios\\)?_\\(oss\\|fb\\)[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native\\(_ios\\)?_\\(oss\\|fb\\)[a-z,_]*\\)?)\\)?:? #[0-9]+
 suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
 
+[lints]
+sketchy-null-number=warn
+sketchy-null-mixed=warn
+sketchy-number=warn
+untyped-type-import=warn
+nonstrict-import=warn
+deprecated-type=warn
+unsafe-getters-setters=warn
+inexact-spread=warn
+unnecessary-invariant=warn
+signature-verification-failure=warn
+deprecated-utility=error
+
+[strict]
+deprecated-type
+nonstrict-import
+sketchy-null
+unclear-type
+unsafe-getters-setters
+untyped-import
+untyped-type-import
+
 [version]
-^0.75.0
+^0.113.0

examples/.flowconfig

@@ -20,7 +20,6 @@ DerivedData
 *.hmap
 *.ipa
 *.xcuserstate
-project.xcworkspace
 
 # Android/IntelliJ
 #
@@ -40,6 +39,7 @@ yarn-error.log
 buck-out/
 \.buckd/
 *.keystore
+!debug.keystore
 
 # fastlane
 #
@@ -54,3 +54,6 @@ buck-out/
 
 # Bundle artifact
 *.jsbundle
+
+# CocoaPods
+/ios/Pods/

examples/.gitignore

@@ -0,0 +1,6 @@
+module.exports = {
+  bracketSpacing: false,
+  jsxBracketSameLine: true,
+  singleQuote: true,
+  trailingComma: 'all',
+};

examples/.prettierrc.js

@@ -32,23 +32,23 @@ export default class example extends Component {
             <TouchableOpacity
                 style={styles.container}
                 onPress={(e)=> {
-                    Linking.openURL('http://www.devio.org/');
+                    Linking.openURL('https://coding.imooc.com/class/304.html');
                 }}
             >
-              <View >
-                <Text style={styles.item}>
-                  SplashScreen 启动屏
-                </Text>
-                <Text style={styles.item}>
-                  @：http://www.devio.org/
-                </Text>
-                <Text style={styles.item}>
-                  GitHub:https://github.com/crazycodeboy
-                </Text>
-                <Text style={styles.item}>
-                  Email:crazycodeboy@gmail.com
-                </Text>
-              </View>
+                <View >
+                    <Text style={styles.item}>
+                        SplashScreen 启动屏
+                    </Text>
+                    <Text style={styles.item}>
+                        @：http://www.devio.org/
+                    </Text>
+                    <Text style={styles.item}>
+                        GitHub:https://github.com/crazycodeboy
+                    </Text>
+                    <Text style={styles.item}>
+                        Email:crazycodeboy@gmail.com
+                    </Text>
+                </View>
             </TouchableOpacity>
         )
     }
@@ -69,4 +69,4 @@ const styles = StyleSheet.create({
         height: 0.3,
         backgroundColor: 'darkgray',
     },
-})
+})