Темная тема не может быть применена к 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> ); } }