问题描述
黑暗主题已为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 (将#修改为@)