Vicky Fadia Ответов: 0

Темная тема не может быть применена к webview для react native android app


Темная тема правильно настроена для приложения React Native expo и работает правильно везде, но когда я включаю ее, тема меняется на темную, все работает отлично, кроме веб-представления.

Как сделать так, чтобы часть webview преобразовалась в темную тему на кнопочном переключателе.

Вот мой код для того, есть ли какое-либо условие if, применяемое к коду, чтобы позволить 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 Ответов