REACT-NATIVE：android - 启动屏幕活动未完成？答案

【问题标题】：REACT-NATIVE: android - SplashScreen activity not finishes?REACT-NATIVE：android - 启动屏幕活动未完成？
【发布时间】：2021-06-19 23:44:17
【问题描述】：

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

这是我的启动画面活动

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();
    }

}

这是我的主要活动

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;

【问题讨论】：

您是否使用 react-native create app 命令启动项目？ Becz 默认情况下，它会像你提到的那样工作。
@Thinker 那和“npx react-native run-android”有什么区别
你设法让它工作了吗？
@Thinker 是的，谢谢你

标签： android windows react-native splash-screen

【解决方案1】：

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

【讨论】：

是的，我认为这是问题
@Ashirbad Panigrahi 我添加了，但它仍然无法正常工作。我添加了我的 App.js。你能检查一下吗

【解决方案2】：

按照这些步骤在 Android 中使用 React Native 实现启动画面

在您的应用中安装 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;

【讨论】：