美文网首页
react-native-splash-screen插件的使用说

react-native-splash-screen插件的使用说

作者: CloudClient | 来源:发表于2019-07-08 17:53 被阅读0次

    github网址:https://github.com/crazycodeboy/react-native-splash-screen/blob/master/README.zh.md

    安装说明

    第一步(下载):

    在项目根目录打开终端运行 npm i react-native-splash-screen --save

    第二步 (安装):

    自动安装

    终端运行:react-native link react-native-splash-screenrnpm link react-native-splash-screen

    手动安装(Android)

    1. 在你的 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')
    
    1. 在你的 android/app/build.gradle 文件中添加 :react-native-splash-screen:
    dependencies {
        ...
        implementation project(':react-native-splash-screen')
    }
    
    1. 更新你的MainApplication.java 文件,如下:
      第十一行引入
    import com.facebook.react.shell.MainReactPackage;
    import java.util.Arrays;
    
    public class MainApplication extends Application implements ReactApplication {
    
        private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
            @Override
            protected boolean getUseDeveloperSupport() {
                return BuildConfig.DEBUG;
            }
            @Override
            protected List<ReactPackage> getPackages() {
                return Arrays.<ReactPackage>asList(
                        new MainReactPackage(),
                new SplashScreenReactPackage()  //添加这一句
                );
            }
        };
        @Override
        public ReactNativeHost getReactNativeHost() {
            return mReactNativeHost;
        }
    }
    

    第三步(配置):

    更新你的 MainActivity.java 文件如下:
    第三行引入

    import android.os.Bundle;
    import org.devio.rn.splashscreen.SplashScreen;
    
    public class MainActivity extends ReactActivity {
       @Override
        protected void onCreate(Bundle savedInstanceState) {
            SplashScreen.show(this);  // 添加这一句
            super.onCreate(savedInstanceState);
        }
        // ...other code
    }
    

    使用说明

    1. 将 react-native-splash-screen 导入你的JS 文件。
      import SplashScreen from 'react-native-splash-screen'
    2. 新建android\app\src\main\res\layout 文件,并在文件夹中新建launch_screen.xml文件,内容如下:
    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical" android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/launch_screen">
    </LinearLayout>
    
    1. 新建android\app\src\main\res\drawable-hdpi文件夹,把启动页图片放进去,命名为launch_screen.png
    2. 如果你只做了以上步骤,你的程序会闪屏后退出,所以你需要在android\app\src\main\res\values\colors.xml文件中加入
      <color name="primary_dark">#660B0B0B</color>
      做了以上步骤android启动屏就完成了

    另外:

    你也可以启用app主题透明选项来解决在APP启动时因主题原因导致的短暂白屏的问题,具体步骤如下:
    打开 android/app/src/main/res/values/styles.xml文件,添加<item name="android:windowIsTranslucent">true</item>,如下 :

    <resources>
        <!-- Base application theme. -->
        <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
            <!-- Customize your theme here. -->
            <!--设置透明背景-->
            + <item name="android:windowIsTranslucent">true</item>
        </style>
    </resources>
    

    API

    方法 类型 可选 描述
    show() function false 打开启动屏幕(原生方法)
    hide() function false 关闭启动屏幕

    相关文章

      网友评论

          本文标题:react-native-splash-screen插件的使用说

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