Отображение ActivityIndicator во время загрузки веб-страницы через веб-представление

У меня есть выставочное приложение, и я использую этот веб-просмотр import { WebView } from 'react-native-webview';https://docs.expo.dev/versions/latest/sdk/webview/

Я хотел бы показать ActivityIndicator при загрузке страницы, а не белый пустой экран, поэтому я использую такое состояние

const [modalVisible, setModalVisible] = useState(false);
const [selectedLink, setSelectedLink] = useState('');
const [isLoading, setIsLoading] = useState(false);

  const handleLoadStart = () => {
    setIsLoading(true);
  };

  const handleLoadEnd = () => {
    setIsLoading(false);
  };

  const handleNavigationStateChange = (navState) => {
    setIsLoading(navState.loading);
  };

а это мой модал

<Modal isVisible = {modalVisible} animationIn = "slideInUp" animationOut = "slideOutDown">
        <View style = {styles.modalContainer}>
              <View style = {styles.modalTitleBar}>
                <Text style = {styles.modalTitle}>Modal Title</Text>
                <TouchableOpacity onPress = {closeModal} style = {styles.closeButton}>
                  <MaterialIcons name = "close" size = {24} color = "white" />
                </TouchableOpacity>
              </View>
              {isLoading ? (
                <View style = {styles.loadingContainer}>
                  <ActivityIndicator size = "large" color = "indigo" />
                </View>
              ) : (
                <WebView
                  source = {{ uri: selectedLink }}
                  onLoadStart = {handleLoadStart}
                  onLoadEnd = {handleLoadEnd}
                  onNavigationStateChange = {handleNavigationStateChange}
                  style = {styles.webView}
                />
              )}
            </View>
    </Modal>

Мой ActivityIndicator загружается навсегда и, похоже, не получает сигнал от веб-просмотра о том, что загружаемая внешняя веб-страница завершила загрузку.

Ни один из этих трех

onLoadStart = {handleLoadStart}
onLoadEnd = {handleLoadEnd}
onNavigationStateChange = {handleNavigationStateChange}

работает. Есть ли этому решение?

Умерло ли Create-React-App?
Умерло ли Create-React-App?
В этом документальном фильме React.dev мы исследуем, мертв ли Create React App (CRA) и какое будущее ждет этот популярный фреймворк React.
Освоение React Native: Пошаговое руководство для начинающих
Освоение React Native: Пошаговое руководство для начинающих
React Native - это популярный фреймворк с открытым исходным кодом, используемый для разработки мобильных приложений. Он был разработан компанией...
В чем разница между react native и react ?
В чем разница между react native и react ?
React и React Native - два популярных фреймворка для создания пользовательских интерфейсов, но они предназначены для разных платформ. React - это...
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
Если вы уже умеете работать с React, создание мобильных приложений для iOS и Android - это новое приключение, в котором вы сможете применить свои...
Хуки React: что это такое и как их использовать
Хуки React: что это такое и как их использовать
Хуки React - это мощная функция библиотеки React, которая позволяет разработчикам использовать состояние и другие возможности React без написания...
0
0
124
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вот как я это исправил

это мой спиннер

  const Spinner = () => (
        <View style = {styles.activityContainer}>
          <ActivityIndicator size = "large" color = "indigo" />
        </View>
    );

и это мой веб-просмотр

<WebView
          source = {{ uri: selectedLink }}
          startInLoadingState = {true}
          javaScriptEnabled = {true}
          domStorageEnabled = {true}
          renderLoading = {Spinner}
          onLoadStart = {handleLoadStart}
          onLoadEnd = {handleLoadEnd}
          onNavigationStateChange = {handleNavigationStateChange}
          style = {styles.webView}
        />

CSS

container: {
    flex: 1
  },
  activityContainer: {
    alignItems: 'center',
    justifyContent: 'center',
    position: 'absolute',
    top: 0,
    left: 0,
    backgroundColor: 'white',
    height: '100%',
    width: '100%'
  },

renderLoading = {Spinner} сработали, а методы, основанные на состоянии, не сработали.

Другие вопросы по теме