Как настроить CSS веб-сайта в собственном веб-представлении?

Question

Я играл с веб-представлениями о реагировании на нативном языке, но я хотел бы изменить CSS на веб-сайте, чтобы настроить стиль. Есть ли способ сделать это?

Использование реагирует на родной 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'
  }
});

Я хотел бы удалить заголовок с веб-сайта, а также изменить другие стили.

Answer 1

В 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();'}
/>

Вполне возможно, что есть лучшие альтернативы, но это, безусловно, один из вариантов.