在 React Native 应用程序中，启动画面仍然没有首先加载答案

【问题标题】：Splash screen still doesn't load first in React Native app在 React Native 应用程序中，启动画面仍然没有首先加载
【发布时间】：2020-11-03 12:17:18
【问题描述】：

刚刚为我的应用添加了启动画面，但它似乎没有在第一时间运行。

我的意思是当我在 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}/>

【问题讨论】：

你的 useEffect 运行了吗？您将默认值设置为 false 并在效果内设置值，但要让效果运行依赖 isReady 应该更改

标签： javascript react-native splash-screen stack-navigator

【解决方案1】：

对于 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 启动画面没有太多经验，所以也许有人可以在这方面为您提供帮助。启动画面是使用原生代码调用的，而不是从 react-native 代码开始的。

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

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

【讨论】：

【解决方案2】：

我正在使用一个非常有用的库来处理 Android 和 iOS 的启动画面 react-native-splash-screen

【讨论】：