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

问题描述

黑暗主题已为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),});
  }

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

  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>
    );
  }
}

谢谢, 薇姬

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)