splash 이미지가 잠깐뜨다가흰화면 뜨네요 흰화면을 splash 이미지로 바꾸는방법


  • Level 4

    import React, { useRef, useState, useCallback, useEffect } from "react";
    import { BackHandler, Platform, StyleSheet,ActivityIndicator } from "react-native";
    import { WebView } from "react-native-webview";

    export default function App() {
    const webView = useRef();

    const [canGoBack, setCanGoBack] = useState(false);
    const handleBack = useCallback(() => {
    if (canGoBack && webView.current) {
    webView.current.goBack();
    return true;
    }
    return false;
    }, [canGoBack]);

    useEffect(() => {
    BackHandler.addEventListener("hardwareBackPress", handleBack);
    return () => {
    BackHandler.removeEventListener("hardwareBackPress", handleBack);
    };
    }, [handleBack]);
    const App = () => (
    <View style={[styles.container, styles.horizontal]}>
    <ActivityIndicator />
    <ActivityIndicator size="large" />
    <ActivityIndicator size="small" color="#0000ff" />
    <ActivityIndicator size="large" color="#00ff00" />
    </View>
    );

    const styles = StyleSheet.create({
    container: {
    flex: 1,
    justifyContent: 'center',
    },
    horizontal: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    padding: 10,
    },
    });

    // 접속하는 기기가 ios또는 안드로이드로 확인하고 그에 맞게 설정한 스타일을 지정한다.
    const platformStyles = StyleSheet.create({
    webView: Platform.OS === 'ios'
    ? { marginTop: 30, marginBottom: 40 }
    : { marginTop: 30 }
    });

    return (
    <WebView
    ref={webView}
    source={{ uri: "https://www.talesrunnerbestguild.co.kr/" }}
    // 지정된 스타일을 적용
    style = {platformStyles.webView}
    onLoadProgress={(event) => setCanGoBack(event.nativeEvent.canGoBack)}
    />
    );

    }

SUGGESTED TOPICS