React-native中配置启动页

最新推荐文章于 2023-06-10 15:22:38 发布

qq_40957216

最新推荐文章于 2023-06-10 15:22:38 发布

阅读量580

点赞数

分类专栏： react-native 文章标签：前端 react native

原文链接：https://blog.csdn.net/weixin_42185136/article/details/88397800?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160336840619724842954327%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=160336840619724842954327&bi

版权

react-native 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍如何在React Native项目中配置启动屏幕，包括安装splash-screen插件、配置Android项目、设置启动画面及关闭启动屏逻辑等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、安装插件

1、npm i react-native-splash-screen --save
2、react-native link react-native-splash-screen

2、执行完上面两条命令，在android/settings.gradle文件下会自动下面语句，请将下面的路径
中’…\node_modules\rn-splash-screen\android’单斜线改为双斜线表示

include ':rn-splash-screen'
project(':rn-splash-screen').projectDir = new File(rootProject.projectDir, '..\\node_modules\\rn-splash-screen\\android')

3、：在android中进行相关配置

1、在android/app/src/main/java/com/xxx/MainActivity.java 文件中添加所示的代码

package xxxx;
import android.os.Bundle;                            //  添加  第一处
import com.facebook.react.ReactActivity;
import org.devio.rn.splashscreen.SplashScreen;       // 添加  第二处
 
public class MainActivity extends ReactActivity {
 
    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected void onCreate(Bundle savedInstanceState) {      // 添加  第三处
        SplashScreen.show(this);
        super.onCreate(savedInstanceState);
    }                                                        //第三处
    @Override
    protected String getMainComponentName() {
        return "xxx";
    }
}

4、android/app/src/main/res目录中,新建layout目录,在layout目录下,创建launch_screen.xml文件,
复制以下内容（其中 launch_screen 为启动的图片名 )

<?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>

5、在android/app/src/main/res目录中,新建drawable-xhdpi和drawable-xxhdpi目录,在其中放入启动页图片,
命名为launch_screen.png

6、打开React-native项目的主入口文件，也就是React-native项目/App.js文件中添加，表示启动页2S后关闭，进入app主页

import SplashScreen from 'react-native-splash-screen';
export default class App extends Component<Props> {    
    componentDidMount() {                   //只需添加componentDidMount(){}就行
        setTimeout(() => {
            SplashScreen.hide();      //关闭启动屏幕
        }, 2000);
    }
	componentWillUnmount() {
    this.timer && clearTimeout(this.timer);         //清除计时器
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>To get started, edit App.js</Text>
        <Text style={styles.instructions}>{instructions}</Text>
      </View>
    );
  }
}