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

Я играл с веб-просмотрами в 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'
  }
});

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

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

Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
2
0
3 141
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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();'}
/>

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

Девон Гарднер большое спасибо! Вы знаете, как я могу сделать карту высотой 100%?

Alberto Ramos 30.05.2019 23:20

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" }; } полная карта();

Devon Gardner 31.05.2019 00:58

Извините за формат, форматирование комментариев отстой. Передайте все это как строку во внедренный JavaScript, и он должен быть золотым.

Devon Gardner 31.05.2019 01:01

И последнее, top = "0" сработало, однако высота осталась прежней, есть идеи?

Alberto Ramos 31.05.2019 03:22

Трудно сказать, много потенциальных точек отказа при работе со всеми css и js, которые, вероятно, работают на стороне сайта. Тем не менее, вы должны иметь возможность играть с атрибутами во втором цикле for, чтобы манипулировать элементом map-wrapper так, как вам нужно. Возможно, вы захотите попробовать поиграть с некоторыми дополнительными атрибутами, такими как положение или альтернативные способы передачи на высоте. Может быть, добавить !important к значению высоты?

Devon Gardner 31.05.2019 03:36

Давайте продолжить обсуждение в чате.

Alberto Ramos 31.05.2019 16:37

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