REACT-NATIVE：android - SplashScreen activity 未完成？

Question

我正在尝试做一个以闪屏启动的应用程序。但是，在我看到初始屏幕后，我看不到主屏幕 activity。我是 react-native 的新手。所以，如果你能帮助我，我将不胜感激。如果你想要更多的文件，我可以添加。

这是我的启动画面activity

package com.splashscreen;
import android.content.Intent;
import android.os.Bundle;
import androidx.appcompat.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();
    }

}

这是我的主要内容 activity

package com.splashscreen;
import com.facebook.react.ReactActivity;
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);
    }

  @Override
  protected String getMainComponentName() {
    return "splashScreen";
  }
}

这是我的 app.js

import React from 'react';
import type {Node} from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';

import {
  Colors,
  DebugInstructions,
  Header,
  LearnMoreLinks,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import SplashScreen from 'react-native-splash-screen';


const Section = ({children, title}): Node => {
  const isDarkMode = useColorScheme() === 'dark';
  return (
    <View style={styles.sectionContainer}>
      <Text
        style={[
          styles.sectionTitle,
          {
            color: isDarkMode ? Colors.white : Colors.black,
          },
        ]}>
        {title}
      </Text>
      <Text
        style={[
          styles.sectionDescription,
          {
            color: isDarkMode ? Colors.light : Colors.dark,
          },
        ]}>
        {children}
      </Text>
    </View>
  );
};

const App: () => Node = () => {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle}>
        <Header />
        <View
          style={{
            backgroundColor: isDarkMode ? Colors.black : Colors.white,
          }}>
          <Section title="Step One">
            Edit <Text style={styles.highlight}>App.js</Text> to change this
            screen and then come back to see your edits.
          </Section>
          <Section title="See Your Changes">
            <ReloadInstructions />
          </Section>
          <Section title="Debug">
            <DebugInstructions />
          </Section>
          <Section title="Learn More">
            Read the docs to discover what to do next:
          </Section>
          <LearnMoreLinks />
        </View>
      </ScrollView>
    </SafeAreaView>
  );

    SplashScreen.hide();

};

const styles = StyleSheet.create({
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
  },
  highlight: {
    fontWeight: '700',
  },
});

export default App;

Answer 1

这在系统文件里是可以的。这可能是应用程序中的问题。也许你没有调用 SplashScreen.hide() 方法？

Answer 2

使用 React Native

在 Android 中按照启动画面的这些步骤操作

在您的应用程序中安装 react-native-splash-screen

npm i react-native-splash-screen

To Follow The Installation Process Click Here

导航到 MainActivity.java

package com.yourprojectname;
import android.os.Bundle; // Add This Line
import com.facebook.react.ReactActivity;
import org.devio.rn.splashscreen.SplashScreen; // Add This Line

public class MainActivity extends ReactActivity {
  @Override
  protected String getMainComponentName() {
    return "yourprojectname";
  }
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    SplashScreen.show(this);  // Add This Line
    super.onCreate(savedInstanceState);
  }
}

在 android/app/src/main/res/layout 文件夹中创建 launch_screen.xml 文件

在这里您可以相应地设计启动画面

 <LinearLayout android:layout_height="match_parent"
     android:layout_width="match_parent"
     android:background="#0002f3"
     xmlns:android="http://schemas.android.com/apk/res/android">

     <ImageView
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:src="@drawable/lunch_screen"
         android:scaleType="center"
         />
 </LinearLayout>

导航到 App.js

import React from 'react';
import { Text} from 'react-native';
import SplashScreen from 'react-native-splash-screen';

const App = () => {
 React.useEffect(() => {
    SplashScreen.hide();
 }, []);

 return <Text>Your App</Text>; 
};

export default App;

REACT-NATIVE：android - SplashScreen activity 未完成？

REACT-NATIVE: android - SplashScreen activity not finishes?

windows

android

splash-screen

react-native