Реагировать на собственный рендеринг html получил ошибку => Ошибка при открытии URL:, [Ошибка: невозможно открыть URL ~ - PullRequest
Новая
       45

Реагировать на собственный рендеринг html получил ошибку => Ошибка при открытии URL:, [Ошибка: невозможно открыть URL ~

1 голос
/ 20 апреля 2020

Я использую RN, EXPO и библиотеку'act-native-render- html 'для рендеринга HTML источника.

Я думаю, что я получил html безупречно, но когда я передаю его HTML тег, подобный этому 

<HTML html={this.state.html}

Я получил ошибку, подобную этой

Ошибка при открытии URL:, [Ошибка: Невозможно открыть URL: файл: /// Users / wook / Библиотека / Разработчик / CoreSimulator / Устройства / 1C8EB2FA-E386-4A53-B136-564DD66A9F86 / data / Containers / Bundle / Приложение / 7B6CBBAD-1F30-48BD-86BB-E536E572854D / Exponent-2.15.3.tar.app / hiddenForm.jp ]

На самом деле я сделал много вещей в подобных вопросах по 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;

и это приложение. 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)

1 Ответ

2 голосов
/ 20 апреля 2020

Здравствуйте, дорогой Я рекомендую вам использовать WebView вместо html рендерера, если вы хотите выполнить рендеринг с внешнего uri 

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, вторым - для Uris I WI sh это помогает

...