初始屏幕仍未首先在React Native应用中加载

问题描述

刚刚为我的应用程序添加了启动屏幕，但似乎它并未在第一部分运行。

我的意思是，当我在avd模拟器上运行该应用程序时，我仍然会先加载白屏，然后加载启动屏幕几毫秒。是否有任何原因，或者我使用的功能有误？

这是我的加载屏幕代码：

function LoadingScreen ({navigation}) {
  setTimeout (() => {
    navigation.replace('FirstScreen');
  },4000);
return (
  <imagebackground style={styles.backgroundContainer} source={splashScreen}/>

  
);

};



const Stack = createStackNavigator();
const PERSISTENCE_KEY = 'NAVIGATION_STATE';

function App() {
   const [isReady,setIsReady] = React.useState(false);
  const [initialState,setinitialState] = React.useState();

  React.useEffect(() => {
    const restoreState = async () => {
      try {
        
          const savedStateString = await AsyncStorage.getItem(PERSISTENCE_KEY);
          const state = savedStateString ? JSON.parse(savedStateString) : undefined;

          if (state !== undefined) {
            setinitialState(state);
          }
        
      } finally {
        setIsReady(true);
      }
    };

    if (!isReady) {
      restoreState();
    }
  },[isReady]);

  if (!isReady) {
    return <imagebackground style={styles.backgroundContainer} source={splashScreen}/>
  }



  return(
    <NavigationContainer
    initialState={initialState}
    onStateChange={(state) =>

    AsyncStorage.setItem(PERSISTENCE_KEY,JSON.stringify(state))

    }
    >
      <Stack.Navigator initialRouteName='SplashScreen' headerMode='none' >
        <Stack.Screen name = 'SplashScreen' component={LoadingScreen}/>
        <Stack.Screen name ='FirstScreen' component={FirstScreen}/>

解决方法

对于android：/android/app/src/main/res/layout添加一个名为launch_screen.xml的xml文件，并在其中添加如下代码：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
<ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/splash"
        android:scaleType="centerCrop"
/>
</RelativeLayout>

，然后在MainActivity.java中这样称呼它：

public class MainActivity extends NavigationActivity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);
    setContentView(R.layout.launch_screen);
  }

我在iOS启动画面方面经验不足，因此也许有人可以在该方面为您提供帮助。 启动画面是使用本机代码而不是本机代码开始的。

您还可以检查此库： https://github.com/crazycodeboy/react-native-splash-screen 看看它是否对您的案件有帮助。

我希望能有所帮助。 祝你好运！

,

我正在使用一个非常有用的库，其中有用于Android和iOS的启动屏幕 react-native-splash-screen