RN模块----react-native-splash-screen

2018-08-02 1,689 阅读1分钟

在做RN开发的时候，当加载启动屏的时候经常会出现1、2秒的白屏，而react-native-splash-screen就是用来解决白屏问题的

1、安装模块

cd到项目根目录下运行`yarn add react-native-splash-screen`，然后再执行`react-native link react-native-splash-screen`

2、在iOS上配置

在AppDelegate.m文件下加入以下代码

`#import "AppDelegate.h"`

`#import "RNSplashScreen.h" //add① 引入头文件`

`- (BOOL)application:(UIApplication )application didFinishLaunchingWithOptions:(NSDictionary )launchOptions{`

`[SplashScreen show];`

`return YES;`

`}`

注意：在运行的时候可能会出现Unknown receiver 'SplashScreen'这样的错误，这时候只需要找到SplashScreen.m文件，把错误的地方改成RNSplashScreen即可

3、将图片放到LaunchImage文件夹下

4、在ReactNative上配置

在需要关闭启动页的js文件下引入 `import SplashScreen from 'react-native-splash-screen'`，然后再关闭处添加代码SplashScreen.hide() 例如

`componentDidMount(){`

`SplashScreen.hide()`

`};`

这样就基本上配置好了

注意事项:

1.当提示RNSplashScreen.h file not found时候，

1 首先打开XCode右键点击Libraries文件夹,选择Add files to 工程名,找到node_modules下得react-native- splash-screen 然后添加SplashScreen.xcodeproj到工程
2 然后找到Build Phases下的Link Binary With Libraries 添加libSplashScreen.a文件
3 最后找到 Build Settings → Search Paths 添加以下代码 $(SRCROOT)/../node_modules/react-native-splash-screen/ios即可