react-native 配置启动图支持ios和android

配置启动图我使用的是第三方模块react-native-splash-screen,更加详细的请到 github地址进一步查看,我们这里提供基本的配置以及个别问题的解决方案

当前环境

OS: macOS High Sierra 10.13.5

Node: 8.11.3

Yarn: 1.7.0

npm: 5.6.0

Watchman: 4.9.0

Xcode: Xcode 9.4.1

react: 16.3.1 => 16.3.1

react-native: 0.55.4 => 0.55.4

react-native-splash-screen: 3.1.0 => 3.1.0

安装第三方模块 react-native-splash-screen


手动配置

1:用Xcode打开项目, 找到Libraries目录,右键选择Add Files to [your project's name]


2:在{project}/node_modules/react-native-splash-screen/ios找到SplashScreen.xcodeproj文件,并添加

3:在XCode中,选择你的项目, 选择bilid Phases并将SplashScreen.xcodeproj/Products/libSplashScreen.a文件添加到Link Binary With Libraries中,拖过去即可


4:添加搜索路径:在项目 → Build Settings → Search Paths → Header Search Paths处添加一项为$(SRCROOT)/../node_modules/react-native-splash-screen/ios



android配置

1:在项目目录{prject}/android/下找到settings.gradle文件添加一下内容


2:在项目目录{prject}/android/app/下找到build.gradle文件添加compile project(':react-native-splash-screen')


3:找到项目目录{project}/android/app/src/main/java/com/app/下MainApplication.java文件,引入import org.devio.rn.splashscreen.SplashScreenReactPackage;并添加new SplashScreenReactPackage()


启动图相关配置

配置ios

1:找到项目目录{project}/ios/{project}/下AppDelegate.m文件,引入#import "SplashScreen.h"添加内容如下


2:在XCode中, 点击App/Images.xcassrts通过LaunchImage添加启动图片


3:在XCode中,选择你的项目, 选择General找到App Icons and Launch Images下的Launch Images Sourc选择你设置好的LaunchImage


4:如出现错误# unknown receiver 'SplashScreen'; did you mean 'RNSplashScreen', 则改动源码以及AppDelegate.m文件如下:

        4.1.源码改动: 找到{project}/node_modules/react-native-splash-screen/ios文件夹下的RNSplashScreen.m文件,将其[SplashScreen show];修改为[RNSplashScreen show];,如下图


  4.2:AppDelegate.m文件改动: 找到项目目录{project}/ios/{project}/下AppDelegate.m文件,将所有SplashScreen改为RNSplashScreen即可,如下图

4.3:重启尝试是否有其他问题,修改源码地址可查看我的github项目地址,更多问题请查看官方issues

配置android

1:在项目目录{prject}/android/app/src/main/res/下创建layout文件夹

在layout文件夹下创建launch_screen.xml添加一下内容


2:将你的启动图改名为launch_screen.png并添加到{prject}/android/app/src/main/res/文件夹下相应的drawable文件夹中(根据需求配置相应大小的文件夹)

1.drawable-ldpi

2.drawable-mdpi

3.drawable-hdpi

4.drawable-xhdpi

5.drawable-xxhdpi

6.drawable-xxxhdpi


3:在{prject}/android/app/src/main/res/values/文件夹下修改名为添加一个名为primary_dark的属性并设置其颜,添加内容如下


4:如果您希望启动屏幕透明,打开{prject}/android/app/src/main/res/values/styles.xml并添加<item name="android:windowIsTranslucent">trueitem>到文件中



在项目中关闭启动图


首先引入进行模块import SplashScreen from 'react-native-splash-screen'

使用SplashScreen.hide()方法将其关闭



©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 193,968评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,682评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,254评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,074评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 60,964评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,055评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,484评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,170评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,433评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,512评论 2 308
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,296评论 1 325
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,184评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,545评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,150评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,437评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,630评论 2 335

推荐阅读更多精彩内容