html - React Native Rendering html 出错 =>Error opening URL: , [Error: Unable to open URL ~

问题描述

我使用 RN、EXPO 和“react-native-render-html”库来呈现 HTML 源代码。

我想我得到了完美的原始html，但是当我将它传递给这样的HTML标签时

<HTML html={this.state.html}

我有这样的错误

打开 URL 时出错：，[错误：无法打开 URL：file:///Users/wook/Library/Developer/CoreSimulator/Devices/1C8EB2FA-E386-4A53-B136-564DD66A9F86/data/Containers/Bundle/Application/7B6CBBAD- 1F30-48BD-86BB-E536E572854D/Exponent-2.15.3.tar.app/hiddenForm.jsp]

我实际上在stackoverflow上的类似问题中做了很多事情，但我无法调试它

任何人都可以帮助我吗？

下面是我的代码

import React from 'react';
import { StyleSheet, Text, View, Button, TextInput, ScrollView, Dimensions } from 'react-native';
import { createAppContainer, ThemeColors } from "react-navigation";
import { createStackNavigator } from 'react-navigation-stack';
import axios from "axios";
import HTML from 'react-native-render-html';

class Educlass extends React.Component {
  state = {
    'html':''
  }
  componentDidMount() {
      const { navigation } = this.props;
      const edu_html = navigation.getParam('html');
      var myPromise = Promise.resolve(edu_html);
      myPromise.then((value) => { this.setState({'html': value} )})
  } 

  render() {

    return (
      <ScrollView style={styles.container}>
        <HTML html={this.state.html} imagesMaxWidth={Dimensions.get('window').width} />
        {/* <Text> {this.state.html} </Text> */}
        <Text>ad</Text>
      </ScrollView>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  }
})

export default Educlass;

这是 App.js

import React from 'react';
import { StyleSheet, Text, View, Button, TextInput, ScrollView, Dimensions } from 'react-native';
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from 'react-navigation-stack';
import DetailsScreen from "./DetailScreen";
import Educlass from "./Educlass";
import axios from "axios";
import HTML from 'react-native-render-html';

class HomeScreen extends React.Component {
  constructor() {
    super()
    this.state = {
      ID: '',
      PW: '',
      // html : ''
    }
  }

  Login = async (ID, PW) => {
    // _clear_Cookie();
    const RCTNetworking = require('react-native/Libraries/Network/RCTNetworking');
    RCTNetworking.clearCookies((result) => { console.log(result) }); //true if clear

    const params = {
      '_enpass_login_': 'submit',
      'langKnd': '',
      'returnUrl': '',
      'loginType': 'normal',
      'ssoId': ID,
      'password': PW,
    }

    try {
      var res1 = await axios({
        url: 'https://portal.uos.ac.kr/user/loginProcess.face',
        method: 'POST',
        params: params,
      }, { withCredentials: true })
      if (res1.status === 200) {
        var res2 = await axios({
          url: 'http://psso.uos.ac.kr/enpass/login?gateway=client&service=http://club.uos.ac.kr/service/sso/sso_login.jsp',
          method: 'GET',
        }, { withCredentials: true })
        if (res2.status === 200) {
          var res3 = await axios({
            url: "http://club.uos.ac.kr/service/index.jsp",
            method: "POST"
          }, { withCredentials: true },{ responseType: 'text' }).then((response) => response.data)
        }
      }
    } catch (error) {
      console.log(error);
    }
    return (res3)
  };

  // _clear_Cookie() {
  //   const RCTNetworking = require('react-native/Libraries/Network/RCTNetworking');
  //   RCTNetworking.clearCookies((result) => { console.log(result) }); //true if clear
  // };

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.IDtext}>ID</Text>
        <TextInput
          style={styles.IDinput}
          placeholder="ID"
          autoCapitalize='none'
          onChangeText={(ID) => this.setState({ 'ID': ID })}
        />
        <Text> {this.state.ID} </Text>

        <Text style={styles.PWtext}>Password</Text>
        <TextInput
          style={styles.PWinput}
          // secureTextEntry={true}
          placeholder="PW"
          autoCapitalize='none'
          onChangeText={(PW) => this.setState({ 'PW': PW })}
        />
        <Text> {this.state.PW} </Text>

        <Button title="Log In" onPress={() => {
          // _html = this.Login(this.state.ID, this.state.PW);
          // this.setState({ 'html': _html })
          this.props.navigation.navigate("Edu", {
            'html': this.Login(this.state.ID, this.state.PW)
          });
        }} />

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  },
  IDtext: {},
  IDinput: {
    borderWidth: 1,
    borderColor: '#777',
    padding: 8,
    margin: 10,
    width: 200
  },
  PWtext: {},
  PWinput: {
    borderWidth: 1,
    borderColor: '#777',
    padding: 8,
    margin: 10,
    width: 200
  }
})

const AppNavigator = createStackNavigator(
  {
    Home: HomeScreen,
    Edu: { screen: Educlass },
    Detail: { screen: DetailsScreen }
  },
  {
    initialRouteName: "Home"
  }
)


export default createAppContainer(AppNavigator);

我认为我的代码中有很多问题，因为我是 RN 新手，但感谢解决了我的问题（渲染 html）

标签： htmlreact-nativerender

html - React Native Rendering html 出错 =>Error opening URL: , [Error: Unable to open URL ~

问题描述

解决方案

推荐阅读