时间戳

首页 > 解决方案 > 在 React Native 应用程序中，启动画面仍然没有首先加载

javascript - 在 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}/>

标签： javascriptreact-nativesplash-screenstack-navigator

解决方案

对于 android：/android/app/src/main/res/layout添加一个名为的 xml 文件launch_screen.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 看看它是否对您的案例有帮助。

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

推荐阅读