Réagir Natif Webview pas de charger une url (Réagir natif de vue web ne fonctionne pas)

Je suis en train de mettre en œuvre réagir natif composant webview dans ma demande, mais la vue web n'est pas le chargement de n'importe quel url de son tout en montrant le blanc de la page.

var React = require('react-native');
var{
 View,
 Text,
 StyleSheet,
 WebView
} = React;


module.exports = React.createClass({
 render: function(){
   return(
     <View style={styles.container}>
      <WebView source={{uri: 'https://m.facebook.com'}} style= {styles.webView}/>
     </View>
   );
 }
});

var styles = StyleSheet.create({
   container: {
     flex:1,
     backgroundColor:  '#ff00ff'
   },webView :{
     height: 320,
     width : 200
   }
});

Ci-dessous la capture d'écran de la sortie .
Réagir Natif Webview pas de charger une url (Réagir natif de vue web ne fonctionne pas)

InformationsquelleAutor Anurag Vijayvergia | 2016-02-17

react-native

35

J'ai eu cette question. WebView rendrait quand c'était la seule pièce retournée, mais pas quand imbriquée dans une autre Vue de composant.

Pour des raisons que je ne suis pas entièrement sûr de le problème a été résolu par la définition d'une largeur de propriété sur le composant WebView.
```
class App extends React.Component {
  render() {

    return (
      <View style={styles.container}>
        <WebView
          source={{uri: 'https://www.youtube.com/embed/MhkGQAoc7bc'}}
          style={styles.video}
        />
        <WebView
          source={{uri: 'https://www.youtube.com/embed/PGUMRVowdv8'}}
          style={styles.video}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'space-between',

  },
  video: {
    marginTop: 20,
    maxHeight: 200,
    width: 320,
    flex: 1
  }
});
```
- container: { flex: 1 } œuvres
- réglage flex: 1 ne fonctionne pas pour moi, sur Android au moins. La définition explicite de height et width n'a, cependant. (imbriquée à l'intérieur d'un <View />)
- On dirait que c'est assez volage - pour moi, flex: 1 fonctionné une fois, j'ai enlevé justify/align accessoires. Suppose que je vais travailler mon chemin à partir de là maintenant.
InformationsquelleAutor Matthew Vincent
13

Je suis face à un même problème. Ce que j'ai remarqué, c'est que WebView ne fonctionne pas si elle est imbriquée. Si le composant renvoie juste WebView, alors tout va bien.
- Cela devrait être la bonne réponse. La spécification de la largeur de la webview est une blague idée, surtout quand vous en avez besoin pour répondre à un large éventail de périphériques, avec une variation de la largeur.
InformationsquelleAutor Rafal Wiliński

WebView fonctionne bien sur Android. Cependant, vous devez activer javascript et dom stockage de certaines pages web.

  <WebView style={styles.webView}
    source={{uri: 'https://google.com/'}}
    javaScriptEnabled={true}
    domStorageEnabled={true}
    startInLoadingState={true}
    >
  </WebView>

InformationsquelleAutor Vince Yuan

4

Si vous voulez que le composant de rendre l'ensemble de la page, vous avez besoin pour l'envelopper avec une Vue qui a flex: 1. Le code ci-dessous fonctionne pour moi:
```
<View style={{flex:1, alignItems: 'flex-end'}}>
  <WebView
   source={{uri: this.state.webContentLink}}
   startInLoadingState={true}
   scalesPageToFit={true} />
</View>
```
InformationsquelleAutor LilyJ

<View>
    <WebView
        source={{uri: this.props.link}}
        style={styles.webview}
        javaScriptEnabled={true}
        domStorageEnabled={true}
        startInLoadingState={true}
    />
</View>

et le style comme suit:

const React = require('react-native');

const { Dimensions } = React;

const deviceHeight = Dimensions.get('window').height;
const deviceWidth = Dimensions.get('window').width;

export default {
  webview: {
      width: deviceWidth,
      height: deviceHeight
  }
};

Tout cela pour faire face à de mauvaises webview dimension, il suffit donc de définir une hauteur et largeur trop (deviceHeight et deviceWidth comme l'exemple ci-dessus).

InformationsquelleAutor Viet Anh Do

4

À l'aide des réponses d'autres utilisateurs, j'ai pu obtenir mon réagir natif avec webview travaillant à la fois à l'intérieur d'un point de vue et hors de vue. Mon problème est venu à deux choses. Être sur l'émulateur android et derrière un proxy, j'ai juste eu à aller sur mon navigateur (chrome) dans l'émulateur android et vous connecter au proxy d'entreprise. D'autre part, certains sites de travail et d'autres ne fonctionnent pas. Si la webview a été imbriquée ou pas à l'intérieur d'une balise View, certains sites comme cnn.com et slack.com etc fonctionnera très bien, mais pas n'importe quels paramètres je l'ai essayé pour google.com il ne fonctionne pas (même si le proxy va certainement permettre google.com) Enfin, quand j'ai reconstruire ma demande et de pousser à l'émulateur de la nouvelle application, parfois, il a fallu un très long à charger n'importe quel site. Mais une fois que le site a été chargé, les liens sont plus rapide et plus réactive. Donc, si vous n'avez pas à voir d'abord quelque chose après un construire des, être aussi patient. Espérons que cela aide quelqu'un d'autre.

Mon dernier app.js
```
import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Dimensions
} from 'react-native';

import { WebView } from 'react-native';

const deviceHeight = Dimensions.get('window').height;
const deviceWidth = Dimensions.get('window').width;

type Props = {};
export default class App extends Component<Props> {

  render() {
    return (
<View style={{flex:1}}>
  <WebView
   style={styles.webview}
   source={{uri: 'https://www.slack.com'}}
   javaScriptEnabled={true}
   domStorageEnabled={true}
   startInLoadingState={false}
   scalesPageToFit={true} />
</View>
    );
  }
}

const styles = StyleSheet.create({
  webview: {
    flex: 1,
    backgroundColor: 'yellow',
    width: deviceWidth,
    height: deviceHeight
  }
});
```
- Vous avez raison, peu de sites ne sont pas de chargement!
- Pas besoin de régler flex: 1, vous avez déjà de couvrir les deviceWidth et deviceHeight.
InformationsquelleAutor Brandon Søren Culley
2

Ci-dessous est le morceau de code qui a travaillé pour moi.
```
render: function(){
   return(
     <View style={styles.container}>
      <WebView url={'https://m.facebook.com'} style= {styles.webView}/>
     </View>
   );
 }
```
- l'url est obsolète, utilisez source={{ uri:m.facebook.com }}
- Vous avez oublié de mentionner les styles ont utilisé
InformationsquelleAutor Anurag Vijayvergia
1

Permettez-moi de donner l'exemple le plus simple qui permettra de travailler de façon transparente:
```
import React from 'react';
import { WebView  } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <WebView
      source={{uri: 'https://github.com/facebook/react-native'}} 
    />

    );
  }
}
```
Ne pas ajouter votre composant WebView dans une vue qui a créé le problème et webview url n'est pas rendu plutôt des styles de vue sera montré.

InformationsquelleAutor Pikachu-go
0

J'ai eu le même problème et a passé une journée à tenter de le résoudre. J'ai copié dans le UIExplorer webview exemple, et cela ne fonctionne pas.

J'ai finalement terminé la mise à niveau de réagir et de créer un nouveau réagir natif de projet et de copier les fichiers là, et qu'il fixe.

Je voudrais avoir une meilleure réponse à pourquoi qu'il fixe, mais j'espère que ça aide

InformationsquelleAutor Aria Buckles
0

J'ai rencontré le même problème récemment. Et j'ai trouvé que

alignement: 'center'

a été à l'origine du problème pour moi. J'ai commenté et la webView ai consommé immédiatement.
J'ai trouvé la solution ici :
https://github.com/facebook/react-native/issues/5974
'brunocvcunha réaction a fonctionné pour moi.

InformationsquelleAutor Devashree

Vous devez vous connecter pour publier un commentaire.