React Native Rendering html got error =>错误打开URL。, [错误。无法打开URL ~

我使用RN,EXPO和’react-native-render-html’库来渲染HTML源。

我想我已经完美地得到了原始的HTML,但是当我把它传递给HTML标签时,就像这样。

<HTML html={this.state.html}

我得到的错误是这样的

错误打开URL。, [Error.Unable open URL: file:/UserswookLibraryDeveloperCoreSimulatorDevices 1C8EB2FA-E386-4A53-B136-DD66A9F86data Unable to open URL: file:/UserswookLibraryDeveloperCoreSimulatorDevices 1C8EB2FA-E386-4A53-B136-564DD66A9F86dataContainersBundleApplication7B6CBBAD-1F30-48BD-86BB-E536E572854DExponent-2.15.3.tar.apphiddenForm.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)。

解决方案:

你好,亲爱的如果你想从外部的URLi进行渲染,我建议你使用WebView而不是html渲染器。

npm install --save react-native-webview
import { WebView } from 'react-native-webview';
<WebView source={{html: '<p>Here I am</p>'}} />
<WebView
    source={{ uri: 'https://emir.drh' }}
  />

第一个用于处理内部的htmls,第二个用于urisi希望能帮助到你

本文来自投稿,不代表运维实战侠立场,如若转载,请注明出处:https://www.shizhanxia.com/718.html

(0)
上一篇 2022年6月29日 下午3:59
下一篇 2022年6月29日 下午3:59

相关推荐

发表评论

登录后才能评论