IThome_Doc_Edit.js

IThome_Doc_Edit.js

import React, { useState, useEffect } from 'react';
import {
  Alert,
  Modal,
  StyleSheet,
  Dimensions,
  Text,
  TouchableHighlight,
  View
} from "react-native";
// 取得屏幕的宽高Dimensions
const { width, height } = Dimensions.get('window');
import { WebView } from 'react-native-webview';
import AsyncStorage from '@react-native-community/async-storage';
const DocEdit = (props) => {
  const [modalVisible, setModalVisible] = useState(false);
  const [Cookie, readCookie] = useState(` __utma=....你的cookie`);
  const run = `
document.querySelector('.header__inner.clearfix').remove()
document.querySelector('.a970').remove()
document.querySelector('.rightside.rightside--article').remove()
document.body.style.backgroundColor = 'blue';
true;
`;
  // setTimeout(() => {
  //   this.webref.injectJavaScript(run);
  // }, 3000);
  return (
    <View style={styles.centeredView}>
      <Modal
        animationType="slide"
        transparent={false}
        visible={modalVisible}
        onRequestClose={() => {
          Alert.alert("Modal has been closed.");
        }}
      >
        <View style={{...styles.centeredView,marginTop: 22}}>
          <View style={styles.modalView}>
            {/* <Text style={styles.modalText}>Hello World!</Text> */}
            <WebView
              ref={(r) => (this.webref = r)}
              javaScriptEnabled={true}
              injectedJavaScript={
                `
                document.querySelector('.header__inner.clearfix').remove()
                document.querySelector('.a970').remove()
                document.querySelector('.rightside.rightside--article').remove()
                document.body.style.backgroundColor = 'blue';
                true;
                `
              }
              onLoadProgress={e => this.webref.injectJavaScript(run)}
              source={{
                uri: props.link,
                headers: {
                  Cookie: Cookie + "",
                },
              }}
              // userAgent={"Mozilla/5.0 (Linux; Android 8.0.0; Pixel 2 XL Build/OPD1.170816.004) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3714.0 Mobile Safari/537.36"}
              userAgent={"User-Agent: Mozilla/5.0 (iPad; CPU OS 11_0 like Mac OS X) AppleWebKit/604.1.34 (KHTML, like Gecko) Version/11.0 Mobile/15A5341f Safari/604.1"}
              containerStyle={{ width: width * 0.9 }}
              sharedCookiesEnabled={true}
              useWebKit={true}
              scalesPageToFit={false}
              // injectedJavaScript={run}
              // injectedJavaScriptBeforeContentLoaded={run}
              showsHorizontalScrollIndicator={false}
              style={{ marginVertical: 10, flex: 1, width: width * 0.9 }}
            />
            <TouchableHighlight
              style={{ ...styles.openButton, backgroundColor: "#2196F3" }}
              onPress={() => {
                setModalVisible(!modalVisible);
              }}
            >
              <Text style={styles.textStyle}>Hide Modal</Text>
            </TouchableHighlight>
          </View>

        </View>
      </Modal>

      <TouchableHighlight
        style={styles.openButton}
        onPress={() => {
          setModalVisible(true);
        }}
      >
        <Text style={styles.textStyle}>全螢幕編輯</Text>
      </TouchableHighlight>
    </View>
  );
};

const styles = StyleSheet.create({
  centeredView: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    // marginTop: 22
  },
  modalView: {
    // margin: 20,
    borderBottomColor: "#00a0e9",
    marginHorizontal: 5,
    marginVertical: 20,
    backgroundColor: "white",
    borderRadius: 20,
    // padding: 35,
    alignItems: "center",
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5
  },
  openButton: {
    backgroundColor: "#F194FF",
    borderRadius: 20,
    padding: 10,
    elevation: 2,
    margin: 10,
  },
  textStyle: {
    color: "white",
    fontWeight: "bold",
    textAlign: "center"
  },
  modalText: {
    marginBottom: 15,
    textAlign: "center"
  }
});

export default DocEdit;

use.js

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Dimensions,
} from 'react-native';
import WebView from '../web/web';
import DocEdit from '../web/DocEdit';

// 取得屏幕的宽高Dimensions
const { width, height } = Dimensions.get('window');


export default class Card extends Component {
  constructor(props) {
    super(props);
    this.state = {
          link: 'https://ithelp.ithome.com.tw/articles/10233547'
    };
  }
  
  render() {
    return (
      <View style={[styles.card]}>
        <DocEdit link={this.props.link} />
        <WebView source={{ uri: 'https://infinite.red' }} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  centeredView: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    // marginTop: 22
  },
  textStyle: {
    color: "white",
    fontWeight: "bold",
    textAlign: "center"
  }
});