【问题标题】:Customize Default Splash Screen of react-native自定义 react-native 的默认启动画面
【发布时间】:2020-10-06 18:20:53
【问题描述】:

有什么办法可以去掉 react-native 的默认启动画面。或自定义默认启动画面。就像我想在启动画面中添加加载栏和淡入淡出效果一样。我想为公司和应用程序创建 2 个启动画面。是否可以更改加载时间?

【问题讨论】:

  • 您好,您使用的是 expo 还是仅 react-native?
  • @OscarVelandia 我正在使用它们... Expo & React-Native

标签: javascript android reactjs react-native splash-screen


【解决方案1】:

如果您只想将图像设置为启动画面,您可以修改您的 app.json,例如 this

如果你想做一个动画飞溅,你可以使用'expo-splash-screen'。我曾经使用过这段代码。最重要的部分是preventAutoHideAsync().catch(console.warn);,它将动画显示为应用程序中的第一个组件,而在hideAsync().catch(console.warn); 中,您将继续执行您的应用程序。

import 'react-native-gesture-handler';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import Home from '_screens/Home';
import Splash from '_screens/Splash';
import { preventAutoHideAsync, hideAsync } from 'expo-splash-screen';
import React, { useState, useEffect } from 'react';

/* expo-splash-screen works fine but raise an exception because the managed expo workflow
 * use the old version of this library, however a fix was merged and probably in the next version of
 * expo this will be fixed, about this error https://github.com/expo/expo/issues/8067
 */
preventAutoHideAsync().catch(console.warn);

export type RootStackParamList = {
  Home: undefined;
};

export default function App(): JSX.Element {
  const [isLoadingSplash, setIsLoadingSplash] = useState(true);
  const Drawer = createDrawerNavigator();
  const init = (): void => {
    setTimeout(async () => {
      hideAsync().catch(console.warn);
      setIsLoadingSplash(false);
    }, 5000);
  };

  useEffect(() => {
    init();
  }, []);

  return (
    <>
      {isLoadingSplash && <Splash />}
      {!isLoadingSplash && (
        <NavigationContainer>
          <Drawer.Navigator initialRouteName="Home">
            <Drawer.Screen name="Login" component={Login} />
            <Drawer.Screen name="Home" component={Home} />
          </Drawer.Navigator>
        </NavigationContainer>
      )}
    </>
  );
}

【讨论】:

    【解决方案2】:

    如果您想更改默认启动画面的图片,请考虑为 android 设置此功能。

    转到android\app\src\main\res\drawable

    然后换头像splashscreen_image.png

    你也可以在那里编辑splashscreen.xml

    【讨论】:

      猜你喜欢
      • 2020-07-30
      • 2016-06-24
      • 1970-01-01
      • 2020-10-16
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2023-04-05
      相关资源
      最近更新 更多