黑暗主题无法应用于Webview来响应本机android应用

时间:2020-10-22 20:48:00

标签: webview react-native-android android-dark-theme

黑暗主题已为React Native expo应用程序正确设置,并在任何地方均可正常使用,但是当我将主题切换为黑暗时,除Web视图外,其他所有功能均正常运行。

如何在按钮开关上将webview部分转换为深色主题。

这是我的代码,是否有任何条件条件适用于让jscode使用的代码?

对React Native有所了解...如果不清楚说明的话,请通知我

/** @format */

import React, { PureComponent } from "react";
import { View } from "react-native";
import { WebView } from "react-native-webview";
import { Color, Styles, withTheme } from "@common";
import { CustomPage } from "@containers";
import { Menu, NavBarLogo, Back } from "./IconNav";

@withTheme
export default class CustomPageScreen extends PureComponent {
  static navigationOptions = ({ navigation }) => {
    const headerStyle = navigation.getParam(
      "headerStyle",
      Styles.Common.toolbar()
    );
    const dark = navigation.getParam("dark", false);
    const isBack = navigation.getParam("isBack", false);
    return {
      headerTitle: NavBarLogo({ navigation }),
      headerLeft: isBack ? Back(navigation) : Menu(dark),

      headerTintColor: Color.headerTintColor,
      headerStyle,
      headerTitleStyle: Styles.Common.headerStyle,
    };
  };

  UNSAFE_componentWillMount() {
    const {
      theme: {
        colors: { background },
        dark,
      },
    } = this.props;

    this.props.navigation.setParams({
      headerStyle: Styles.Common.toolbar(background, dark),
      dark,
    });
  }

  componentWillReceiveProps(nextProps) {
    if (this.props.theme.dark !== nextProps.theme.dark) {
      const {
        theme: {
          colors: { background },
          dark,
        },
      } = nextProps;
      this.props.navigation.setParams({
        headerStyle: Styles.Common.toolbar(background, dark),
        dark,
      });
    }
  }

  render() {
    const { state } = this.props.navigation;
    if (typeof state.params === "undefined") {
      return <View />;
    }
let jsCode = `
            document.querySelector('header').style.display = 'none';
            document.querySelector('footer').style.display = 'none';
            document.querySelector('#back_to_top').style.display = 'none';
            document.querySelector('ul.heateor_sss_sharing_ul').style.display = 'none';
            document.querySelector('.default_template_holder').style.marginTop = '-30px';
            document.querySelector('.default_template_holder').style.marginBottom = '-50px';
            document.querySelector('#qlwapp').style.display = 'none';
            document.querySelector('div#onesignal-bell-container').style.display = 'none';
        `;
    if (typeof state.params.url !== "undefined") {
      return (
        <View style={{ flex: 1 }}>
          <WebView startInLoadingState source={{ uri: state.params.url }} injectedJavaScript={jsCode}/>

        </View>
      );
    }

    return (
      <View style={{ flex: 1 }}>
        <CustomPage id={state.params.id} />
      </View>
    );
  }
}

谢谢, 薇姬

0 个答案:

没有答案
相关问题