
两种方法
1:copy图片进drawable文件夹时,在路径后面加上“-xhdpi”
2.直接在drawable文件夹下新建一个drawable-xhdpi文件夹,你再添加图片的时候就会让你选择将图片具体放到哪个文件夹下
要解决这个问题,就要先知道屏幕适配的原理不同分辨率对应的文件夹
首先我们知道android工程目录res下有四个文件夹,drawable-hdpi、drawable-mdpi、drawable-ldpi、drawable-xhdpi,主要是为了支持多分辨率的图片。如果你制作的游戏切图是480x800的切图,就应该放到drawable-hdpi目录下,如果是320x480的切图,就应该放到mdpi目录下。如果是720x1280的,通常会放到xhdpi目录下。
图片缺省时的处理方式
安卓系统在加载图片的时候有一套严格的规则,它会事先判断手机屏幕的分辨率,然后根据分辨率去加载对应文件夹里的图片。如果找不到,则会从drawable或者其他drawable-*文件夹中寻找。找到图片以后,系统会对图片尺寸与手机屏幕进行比对,尺寸一致则会正常显示,而遇到尺寸不一致的那么系统会根据一定规律对图片尺寸进行缩放,然后显示在屏幕上。此时,由于图片尺寸经过缩放,所以屏幕上的显示效果会受到影响,因此通常在游戏测试阶段,测试者应该准备好不同尺寸搭配不同分辨率的设备进行多次校验,如果是在上线前希望能进行大规模的手机游戏兼容性测试的话则可以尝试使用诸如:TestBird这样的第三方手游自动化测试平台。
不同比例的屏幕常见适配方式
通常成熟的游戏厂商针对不同比例以及不同分辨率的屏幕,会有一套自有的解决方案。而对于中小规模的开发团队或者个人开发者而言,往往没有时间专门对不同尺寸的屏幕进行适配,比如常见的安卓设备屏幕比例为16:9,而像魅族的屏幕比例则为15:9,IPad则为4:3,这样的情况下屏幕适配就变得异常麻烦。常见的图片缩放在这样的情况下会造成屏幕边缘内容的丢失,通常最好的办法是尽可能把图片缩放到最大,保留部分没有显示的黑边区域,而这样的的好处是可以不丢失任何内容,但缺点是黑边区域实际会影响到玩家的使用体验。最早在IPad尚未普及时,为了保证游戏尽可能多的兼容IPad,因此大量的采用了这样的适配方案。
另外值得一提的是,如果制作手游切图的话母版可以尽可能用720P,因为目前主流机型的屏幕分辨率是720P,720P在对图片进行缩放的过程中放大到1080P时不会感到特别模糊,缩小到480P时也不会看不清内容。这是目前很常用的一个屏幕适配解决方案,但由于15年1080p将会开始普及,所以笔者认为很快情况就会有所变化了。
当前环境
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
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
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()
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
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()方法将其关闭
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)