У меня есть выставочное приложение, и я использую этот веб-просмотр 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}
работает. Есть ли этому решение?





Вот как я это исправил
это мой спиннер
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} сработали, а методы, основанные на состоянии, не сработали.