在显示主屏幕之前显示启动画面以反应原生而不使用第三方库

4 回答

• 8

  你总是可以用原生的方式做到这一点：

  Fisrt您需要在不同设备上显示闪屏的图像：

  • LDPI：

  • 肖像：200x320px

  • 风景：320x200px

  • MDPI：

  • 肖像：320x480px

  • 风景：480x320px

  • HDPI：

  • 肖像：480x800px

  • 风景：800x480px

  • XHDPI：

  • 肖像：720px1280px

  • 风景：1280x720px

  • XXHDPI：

  • 肖像：960px1600px

  • 风景：1600x960px

  • XXXHDPI：

  • 肖像：1280px1920px

  • 风景：1920x1280px

  它们必须是 png 格式，然后将它们放在 android/app/src/main/res/drawable 上并创建一个以每个图像的分辨率命名的文件夹 . 例如： drawable/drawable-hdpi .

  然后在drawable文件夹中，你必须创建一个名为 background_splash.xml 的文件，并输入如下内容：

  <?xml version="1.0" encoding="utf-8"?>
  <selector xmlns:android="http://schemas.android.com/apk/res/android">
  
      <item>
          <bitmap
              android:gravity="fill"
              android:src="@drawable/screen"/>
      </item>
  </selector>
  

  之后你必须在 android/app/res/values/styles.xml 中添加一个新样式

  <resources>
  
      <!-- Base application theme. -->
      <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
          <!-- Customize your theme here. -->
      </style>
  
      <style name="SplashTheme" parent="Theme.AppCompat.NoActionBar">
          <item name="android:windowBackground">@drawable/background_splash</item>
      </style>
  
  </resources>
  

  更新 AndroidManifest.xml 文件，添加名为 SplashActivity 的新活动并添加 android:theme="@style/SplashTheme" . 现在创建一个名为 MainActibity 的空活动 . 你的 AndroidManifest.xml 应该是这样的：

  <manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="com.exampleapp"
      android:versionCode="1"
      android:versionName="1.0">
  
      <uses-permission android:name="android.permission.INTERNET" />
      <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
  
      <uses-sdk
          android:minSdkVersion="23"
          android:targetSdkVersion="26" />
  
      <application
        android:name=".MainApplication"
        android:allowBackup="true"
        android:label="@string/app_name"
        android:icon="@mipmap/ic_launcher"
        android:theme="@style/AppTheme">
          <activity
              android:name=".SplashActivity"
              android:label="@string/app_name"
              android:theme="@style/SplashTheme">
              <intent-filter>
                  <action android:name="android.intent.action.MAIN" />
                  <category android:name="android.intent.category.LAUNCHER" />
              </intent-filter>
          </activity>
          <activity android:name=".MainActivity" 
              android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
              android:windowSoftInputMode="adjustResize"
              android:exported=”true”
          />
        <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
      </application>
  
  </manifest>
  

  现在我们需要告诉SplashActivity转到MainActivity，它代表我们的实际应用程序 . 为此，您需要创建一个名为 SplashActivity 的新Java类 .

  package com.exampleapp; // change to the name of your app.
  
  import android.content.Intent;
  import android.os.Bundle;
  import android.support.v7.app.AppCompatActivity;
  
  public class SplashActivity extends AppCompatActivity {
      @Override
      protected void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
  
          Intent intent = new Intent(this, MainActivity.class);
          startActivity(intent);
          finish();
      }
  }
  

  现在你应该看到一个闪屏 .

  https://medium.com/handlebar-labs/how-to-add-a-splash-screen-to-a-react-native-app-ios-and-android-30a3cec835ae

  回复于 2024-05-05T05:54:23+08:00
• 1

  只需遵循这个简单的代码 .

  App.js

  import { createStackNavigator,createAppContainer } from "react- 
  navigation";
  import Splash from "./Controller/Splash";
  import Login from "./Controller/Login";
  import Register from "./Controller/Register";
  
   const Navigator = createStackNavigator ({
   main: { screen: Splash },
   LoginScreen: { screen : Login },
   });
  
  const AppNavigator = createAppContainer(Navigator);
  
    export default class App extends Component {
    render() {
    return <AppNavigator />;
    }
   }
  

  Splash.js

  import React, { Component } from "react";
  import {View, Text } from "react-native";
  
  export class Splash extends Component {
  
   componentDidMount() {
      setTimeout(() => {
         this.load();
            }, 4000);
      }
  
     load = () => {
          this.props.navigation.push("LoginScreen");
      };
  
      render() {
          return (
       <View >
         <Text style={styles.myText}>Splash Screen</Text>
    </View>
    );
   }
  }
   export default Splash;
  

  希望这可以帮助 ：）

  回复于 2024-05-05T05:54:23+08:00
• 1

  您可以尝试这个例子 . 在启动画面中不需要stacknavigator .

  constructor(props){
      super(props);
      this.state = {
          timePassed: false,
      };
  }
  
  componentDidMount() {
      setTimeout( () => {
          this.setTimePassed();
      },1000);
  }
  
  setTimePassed() {
      this.setState({timePassed: true});
  }
  
  render() {
      if (!this.state.timePassed) {
          return <SplashScreen/>;
      } else {
          return <Login/>;
      }
  }
  

  回复于 2024-05-05T05:54:23+08:00
• 0

  制作Splash Screen的正确方法是修改根路由 . Firstable你需要为你的应用程序创建图像 . 你可以通过在网站https://apetools.webprofusion.com/app/#/上传你的图像来快速地做到这一点，它将创建一个包含iOs，windows和android的所有图像的包文件，并将它们放在每个设备的文件夹中 . 您需要将这些文件夹复制到每个设备的路径，以防您创建任何文件夹，替换它 . 路线 {device}/app/src/main/res/{folder-name}

  在路径 {device}/app/src/main/res/drawable 的drawable文件夹中，您将 icon.png ＆ screen.png 并创建一个名为的文件

  splash_background.xml 在此文件中添加下一个文本

  `<?xml version="1.0" encoding="utf-8"?>
  <selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
      <bitmap
        android:gravity="fill"
        android:src="@drawable/screen"
      />
    </item>
  </selector>`
  

  在路线 {device}/app/src/main/java/com/{name-of-project} 中添加名为 SplashActivity.java 的文件

  在此文件中 SplashActivity.java 添加下一个：

  package com.prework;
  import android.content.Intent;
  import android.os.Bundle;
  import android.support.v7.app.AppCompatActivity;
  
  public class SplashActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
  
      Intent intent = new Intent(this, MainActivity.class);
      startActivity(intent);
      finish();
    }
  }
  

  在路线 {device}/app/src/main/res/values/styles.xml 中更改如下：

  <resources>
  
      <!-- Base application theme. -->
      <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
          <!-- Customize your theme here. -->
      </style>
      <style name="SplashTheme" parent="Theme.AppCompat.NoActionBar">
          <item name="android:windowBackground">@drawable/splash_background</item>
      </style>
  
  </resources>
  

  并在路线 {device}/app/src/main/res/AndroidManifest.xml 更改如下

  <manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="com.prework">
  
      <uses-permission android:name="android.permission.INTERNET" />
      <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
  
      <application
        android:name=".MainApplication"
        android:label="@string/app_name"
        android:icon="@drawable/icon"
        android:allowBackup="false"
        android:theme="@style/AppTheme">
  
        <activity
          android:name=".SplashActivity"
          android:label="@string/app_name"
          android:theme="@style/SplashTheme"
          android:configChanges="keyboard|keyboardHidden|orientation|screenSize">
  
          <intent-filter>
              <action android:name="android.intent.action.MAIN" />
              <category android:name="android.intent.category.LAUNCHER" />
          </intent-filter>
        </activity>
  
        <activity
          android:name=".MainActivity"
          android:label="@string/app_name"
          android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
          android:windowSoftInputMode="adjustResize">
        </activity>
  
        <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
      </application>
  
  </manifest>
  

  现在通过在命令行中运行来重建您的应用程序 react-native run-android

  回复于 2024-05-05T05:54:23+08:00