react-native启动页配置

作者: 北故城 | 来源:发表于2019-11-15 14:24 被阅读0次

1启动图

安装第三方库(react-native-splash-screen);

根据react-native版本选择不同的安装包
React Native >= 0.47.0 use v3.+,
React Native < 0.47.0 use v2.1.0

yarn add react-native-splash-screen
or npm
npm i react-native-splash-screen --save
  • 然后link
  • react-native link react-native-splash-screen
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')
2找到目录android/app/build.gradle添加如下代码
...
dependencies {
    ...
    implementation project(':react-native-splash-screen') //在对应位置添加这句
}
3android目录下找到 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
        public 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;
    }
}
4android目录下找到 MainActivity.java文件添加如下代码添加时注意版本选择
import android.os.Bundle; // here
import com.facebook.react.ReactActivity;
// react-native-splash-screen >= 0.3.1
import org.devio.rn.splashscreen.SplashScreen; // here
// react-native-splash-screen < 0.3.1
import com.cboy.rn.splashscreen.SplashScreen; // here

public class MainActivity extends ReactActivity {
   @Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this);  // here
        super.onCreate(savedInstanceState);
    }
    // ...other code
}
5app/src/main/res/layout目录下创建launch_screen.xml文件并添加如下代码
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/launch_screen" android:scaleType="centerCrop" />
</RelativeLayout>

6app/src/main/res/目录下创建如下文件以适配在不同屏幕下选择不同尺寸的图片

  • drawable-ldpi
  • drawable-mdpi
  • drawable-hdpi
  • drawable-xhdpi
  • drawable-xxhdpi
  • drawable-xxxhdpi
修改app/src/main/res/values/colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="primary_dark">#000000</color>
</resources>
如果要设置启动页透明只需要修改android/app/src/main/res/values/styles.xml
<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <!--设置透明背景-->
        <item name="android:windowIsTranslucent">true</item>
    </style>
</resources>

配置完这些就算完成了,然后在对应的App初始页关闭启动图就可以了

import SplashScreen from 'react-native-splash-screen'

export default class WelcomePage extends Component {

    componentDidMount() {
        // do stuff while splash screen is shown
        // After having done stuff (such as async tasks) hide the splash screen
        SplashScreen.hide(); // =>引入文件,调用该方法关闭启动图
    }
}

相关文章

网友评论

    本文标题:react-native启动页配置

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