自定义 react-native 的默认启动画面
Customize Default Splash Screen of react-native
有什么方法可以去掉react-native默认的启动画面。或自定义默认启动画面。就像我想在启动画面中添加加载栏和淡入淡出效果一样。我想为公司和应用程序创建 2 个启动画面。是否可以更改加载时间?
如果您只想将一张图片设置为启动画面,您可以将 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>
)}
</>
);
}
如果您想更改默认启动画面的图片,请考虑 android。
转到 android\app\src\main\res\drawable
再换图splashscreen_image.png
您也可以在那里编辑 splashscreen.xml
有什么方法可以去掉react-native默认的启动画面。或自定义默认启动画面。就像我想在启动画面中添加加载栏和淡入淡出效果一样。我想为公司和应用程序创建 2 个启动画面。是否可以更改加载时间?
如果您只想将一张图片设置为启动画面,您可以将 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>
)}
</>
);
}
如果您想更改默认启动画面的图片,请考虑 android。
转到 android\app\src\main\res\drawable
再换图splashscreen_image.png
您也可以在那里编辑 splashscreen.xml