如何在反应原生 webview 中自定义网站 CSS？

Question

我一直在使用 react native 上的 webviews，但我想更改网站的 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'
  }
});

我想从网站上删除标题以及修改其他样式。

Answer 1

WebView 有一个可用的“injectedJavaScript”道具，它允许您向它提供一段 javascript，您可以使用它来操作页面上的任何 CSS/HTML。

这有点 hacky，但我并没有真正看到替代方案，因为您在使用 webview 时实际上是在使用 iframe。

我正在使用它来隐藏我在应用程序的 web 视图中引用的网站导航栏中的汉堡栏：

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

完全有可能有更好的选择，但这肯定是一种选择。