美文网首页
react-native-splash-screen 给安卓项目

react-native-splash-screen 给安卓项目

作者: 浮生随笔 | 来源:发表于2018-07-30 16:19 被阅读148次

    react-native-splash-screen 给安卓项目添加启动图

    react-native-splash-screen 基本配置

    • 安装插件:npm install react-native-splash-screen --save
    • 关联项目:react-native link react-native-splash-screen or rnpm link react-native-splash-screen

    link 之后,安卓项目中会自动添加头文件 以及部分代码,为保证项目顺利运行,还请确认下面代码是否已经完善。

    • 确保 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 文件中 添加依赖 `react-native-splash-screen`
    
        ```
    ...
    dependencies {
        ...
        compile project(':react-native-splash-screen')
    }
    
    • 更新 MainApplication.java 文件
    // react-native-splash-screen >= 0.3.1
    import org.devio.rn.splashscreen.SplashScreenReactPackage;
    // react-native-splash-screen < 0.3.1
    import com.cboy.rn.splashscreen.SplashScreenReactPackage;
    
    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()  //here
                );
            }
        };
    
        @Override
        public ReactNativeHost getReactNativeHost() {
            return mReactNativeHost;
        }
    }
    

    准备添加代码和文件配置

    • app/src/main/res/layout 文件夹下 添加 launch_screen.xml 并copy如下代码:
    <?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>
    
    • 创建文件夹 drawable-xhdpidrawable-xxhdpi(暂时先创建这两个就够了),将准备好的启动图 命名为 launch_screen.png 分别放入创建好的文件夹

    • 白屏问题,设置透明背景:android/app/src/main/res/values/styles.xml 文件夹下 添加 <item name="android:windowIsTranslucent">true</item>

    <resources>

    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">


    <item name="android:windowIsTranslucent">true</item>
    </style>
    </resources>

    
    * `android/app/src/main/res/values/colors.xml` 文件夹下,添加如下:
    
        ```
    <?xml version="1.0" encoding="utf-8"?> <resources> <color name="primary_dark">#660B0B0B</color> </resources>
    
    • 适当的时刻 隐藏启动图 可以是在视图挂载完毕,可以是网络请求结束之后
    import SplashScreen from 'react-native-splash-screen'
    componentDidMount() {
        SplashScreen.hide();
      }
    

    相关文章

      网友评论

          本文标题:react-native-splash-screen 给安卓项目

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