如何在反应本机 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'
  }
});

我想从网站上删除 header 并修改其他样式。

Answer 1

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

这有点老套，但我真的没有看到替代方案，因为您在使用 webview 时实际上是在使用 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();'}
/>

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

如何在反应本机 webview 中自定义网站 CSS？

How do I customize website CSS in a react native webview?

webview

node.js

reactjs

react-native