Я играл с веб-просмотрами в React Native, но я хотел бы изменить css веб-сайта, чтобы настроить стиль. Есть ли способ сделать это?
Использование React Native cli и Android Studio
import React from 'react';
import { StyleSheet, Text, View, Image, StatusBar, ScrollView, TouchableOpacity, WebView, ActivityIndicator } from 'react-native';
class king_of_prussia extends React.Component {
static navigationOptions = {
title: 'King Of Prussia',
headerTitleStyle :{textAlign: 'center', alignSelf:'center', fontSize: 18, fontWeight: 'normal', color: '#3E3E40' },
headerStyle:{
backgroundColor:'white',
},
};
ActivityIndicatorLoadingView() {
return (
<ActivityIndicator
color='black'
size='large'
style = {styles.ActivityIndicatorStyle}
/>
);
}
render() {
return (
<View style = {styles.container}>
<StatusBar
backgroundColor='#F1F1F1'
barStyle='dark-content'/>
<WebView
source = {{uri: 'https://www.simon.com/mall/king-of-prussia/map#/'}}
scalesPageToFit = {false}
javaScriptEnabled = {true}
domStorageEnabled = {true}
renderLoading = {this.ActivityIndicatorLoadingView}
startInLoadingState = {true}
/>
</View>
);
}
}
export default king_of_prussia;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#EFF2F5',
},
footer: {
flexDirection: 'column',
alignItems: 'center',
marginBottom: 25,
},
shareText:{
color:'#95989A',
fontSize: 12
},
ActivityIndicatorStyle:{
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
alignItems: 'center',
justifyContent: 'center'
}
});
Я хотел бы удалить заголовок с веб-сайта, а также изменить другие стили.
WebView имеет доступную поддержку «injectedJavaScript», которая позволит вам передать ему блок javascript, который вы можете использовать для управления любым CSS/HTML на странице.
Это немного хакерски, но я действительно не видел альтернативы, так как вы, по сути, работаете с iframe при использовании веб-просмотра.
Я использую это, чтобы скрыть панель гамбургеров на панели навигации сайта, на который я ссылаюсь в веб-просмотре в своем приложении:
<WebView
source = {{uri: this.state.magicUrl}}
style = {{ flex: 1 }}
injectedJavaScript = {'function hideHeaderToggle() {var headerToggle = document.getElementsByClassName("navbar-toggle"), i;for (i = 0; i < headerToggle.length; i += 1) {headerToggle[i].style.display = "none";};}; hideHeaderToggle();'}
/>
Вполне возможно, что есть лучшие альтернативы, но это, безусловно, один из вариантов.
function fullMap() { var topNav = document.getElementsByClassName('navbar'); var mapWrap = document.getElementsByClassName('map-wrapper'); for(var i = 0; i < topNav.length; i += 1){ topNav[i].style.display = "none"; }; for(var i = 0; i < mapWrap.length; i += 1){ mapWrap[i].style.height = "100%"; mapWrap[i].style.top = "0" }; } полная карта();
Извините за формат, форматирование комментариев отстой. Передайте все это как строку во внедренный JavaScript, и он должен быть золотым.
И последнее, top = "0" сработало, однако высота осталась прежней, есть идеи?
Трудно сказать, много потенциальных точек отказа при работе со всеми css и js, которые, вероятно, работают на стороне сайта. Тем не менее, вы должны иметь возможность играть с атрибутами во втором цикле for, чтобы манипулировать элементом map-wrapper так, как вам нужно. Возможно, вы захотите попробовать поиграть с некоторыми дополнительными атрибутами, такими как положение или альтернативные способы передачи на высоте. Может быть, добавить !important к значению высоты?
Давайте продолжить обсуждение в чате.
Девон Гарднер большое спасибо! Вы знаете, как я могу сделать карту высотой 100%?