美文网首页
react-native-splash-screen

react-native-splash-screen

作者: __笑我一世沉沦丶 | 来源:发表于2020-01-14 14:16 被阅读0次

    插件比较老,可能自动安装会出现各种问题,这里推荐手动安装,可以比较清晰的知道是哪出了问题
    插件下载: yarn add react-native-splash-screen

    • android
      android/settings.gradle目录下,添加:
    include ':react-native-splash-screen'   
    project(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android')
    

    android/app/build.gradle目录下,引入该安卓包:

    implementation project(':react-native-splash-screen')
    

    在官方文档上,接下来会让我们在MainApplication中注册该包,于是在后面的步骤都完成之后,程序启动很正常,没有报错,甚至在Android Studio中运行也没有报错,本以为就这样结束了的,没想到启动屏关闭之后就出现了这个错误:


    image.png

    错误信息显示,我们获取插件的方法在MainApplication中重写了两次,导致该错误的原因应该是在以下这句里面,该Android包已经在PackageList中了,所以我们后面就不需要再自己手动添加注册包了,即可以省略掉文档中在MainApplication中注册的操作。

    List<ReactPackage> packages = new PackageList(this).getPackages();
    

    之后我们需要在app/src/main/res/layout中添加名称为launch_screen.xml的相对布局页面,做为我们启动项的安卓页面,里面的图片路径放在res路径下的drawable文件夹下,各文件夹“-”后面的含义如下:

    ldpi:240x320
    mdpi:320x480
    hdpi:480x800、480x854
    xhdpi:至少960*720
    xxhdpi:1280×720
    

    至此,我们安卓部分的基本集成就完成了,至于文档中列出的配置如下资源文件:

    <?xml version="1.0" encoding="utf-8"?>
    <resources>
        <color name="primary_dark">#000000</color>
    </resources>
    ------------------------------------------------------------------------
    <resources>
        <!-- Base application theme. -->
        <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
            <!-- Customize your theme here. -->
            <!--设置透明背景-->
            <item name="android:windowIsTranslucent">true</item>
        </style>
    </resources>
    

    这些都是我们定义样式之类的用的,如果只是简单放一张图片不需要配置这些

    以下是js调用插件,在页面componentDidMount生命周期勾子函数执行时,将页面启动屏关闭的方法:

    import SplashScreen from 'react-native-splash-screen'
    export default class App extends Component {
        componentDidMount() {
            SplashScreen.hide();
        }
        。。。。。。。
    }
    
    • ios
      待更新

    相关文章

      网友评论

          本文标题:react-native-splash-screen

          本文链接:https://www.haomeiwen.com/subject/xmtaactx.html