我在 expo 中的第一个反应本机代码：需要在 5 秒内添加启动画面

Question

这是我的第一个 expo 代码，我能够运行成功：

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import { WebView } from 'react-native-webview';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

export default function App() {
  return (
    <WebView
        style={{ marginTop: 0 }}
        source={{ uri: 'https://baldeaglemall.com/' }}
    />
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

但是我无法添加一个有 10 秒时间的启动画面来显示。追逐 google 搜索并没有带我去任何地方。我需要对上面的代码进行哪些修改？

编辑：

启动画面基于 expo 文档中的示例。

但是下面的答案会在启动画面之后立即出现白屏，并且它会一直停留在白屏状态，永远不会出现在 webview 中。

Answer 1

您可以使用 SplashScreen.preventAutoHideAsync()（由 expo-splash-screen 提供）使本机初始屏幕保持可见，直到调用 SplashScreen.hideAsync()。

将包添加到您的依赖项

$ expo install expo-splash-screen

然后，像这样使用它：

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import { WebView } from 'react-native-webview';
import * as SplashScreen from 'expo-splash-screen'; // <-- import it

import AssetExample from './components/AssetExample';

import { Card } from 'react-native-paper';

// Prevent native splash screen from autohiding before App component declaration
SplashScreen.preventAutoHideAsync()
  .then((result) => console.log(`SplashScreen.preventAutoHideAsync() succeeded: ${result}`))
  .catch(console.warn); // it's good to explicitly catch and inspect any error

export default function App() {
  React.useEffect(() => {
    setTimeout(async () => {
      await SplashScreen.hideAsync();
    }, 5000); // <-- Set this to `5000` ms to hide it after 5 seconds
  }, []);

  return (
    <WebView
      style={{ marginTop: 0 }}
      source={{ uri: 'https://baldeaglemall.com/' }}
    />
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

_{免责声明：我没有测试过这段代码，但它应该可以工作}

我在 expo 中的第一个反应本机代码：需要在 5 秒内添加启动画面

My first react native code in expo: need to add splash screen with 5 seconds time

webview

react-native

expo