loading indicator (로딩 아이콘)

1) 방법1 - webview 프롭 이용

• react-native-webview의 프롭으로 아래와 같이 설정하면 됨.

<WebView style={{ flex: 1 }}
    startInLoadingState={true} //로딩 상태를 true로 시작.
    renderLoading={() => { //로딩 시 ActivityIndicator 출력.
        return (
          <ActivityIndicator
            color='#bc2b78'
            size='large'
            styles={styles.activityIndicator}
          />
        );
      }}
    source={{
        uri: url
    }}
    sharedCookiesEnabled={true}
/>

2) 방법2 - 이벤트&상태로 visible로 관리

• react-native-webview 프롭 이용
• onLoad 이벤트는 로딩 완료 시 호출됨.
• onLoadStart 이벤트는 로딩 시작 시 호출됨.

• 위의 두 이벤트 함수를 이용해서 visible state를 바꿔서 indicator 표시/숨김 결정.

import React, { useState } from 'react'
import { View, StyleSheet, ActivityIndicator } from 'react-native'
import { WebView } from 'react-native-webview'

function SettingsWebView({ route, navigation }) {
    const [isLoading, setIsLoading] = useState(true);

    const url = route.params.url;
    console.log("url : ", url);

    return (
        <View style={{ flex: 1 }}>
            <WebView
                onLoadStart={() => (setIsLoading(true))}
                onLoad={() => setIsLoading(false)}
                style={{ flex: 1 }}
                source={{ uri: url }}
            />
            {isLoading && (
                <ActivityIndicator
                    style={styles.activityIndicator}
                    size="large"
                    color="#000"
                />
            )}
        </View>
    );
}

const styles = StyleSheet.create({
    activityIndicator: {
        flex: 1,
        left: 0,
        right: 0,
        top: 0,
        bottom: 0,
        position: 'absolute',
        alignItems: 'center',
        justifyContent: 'center'
    },
})

export default SettingsWebView;