react native - tecnologia - Reaccionar la vista web nativa no carga ninguna URL(reaccionar la vista web nativa no funciona)

react native video controls

Question

Estoy tratando de implementar el componente nativo de webview en mi aplicación, pero la vista web no carga ninguna URL, solo muestra la página en blanco.

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
   }
});

A continuación se muestra la captura de pantalla de la salida.

Answer 1

A continuación se muestra parte del código que funcionó para mí.

render: function(){
   return(
     <View style={styles.container}>
      <WebView url={''https://m.facebook.com''} style= {styles.webView}/>
     </View>
   );
 }

Answer 2

Al usar las respuestas de otros usuarios, pude obtener mi reacción nativa con webview trabajando tanto dentro de una vista como fuera de una vista. Mi problema se redujo a dos cosas. Al estar en el emulador de Android y detrás de un proxy, solo tenía que ir a mi navegador (chrome) en el emulador de Android e iniciar sesión en el proxy corporativo. En segundo lugar, algunos sitios funcionan y otros no funcionarán. Si la vista web estaba anidada o no dentro de una etiqueta de Vista, algunos sitios como cnn.com y slack.com, etc., funcionarán bien, pero no importa qué configuración intenté para google.com, no funcionaría (aunque el proxy no definitivamente permitir google.com) Por último, cuando reconstruyo mi aplicación y presiona al emulador la nueva aplicación, a veces demoraba mucho tiempo cargar cualquier sitio. Pero una vez que se cargó el sitio, los enlaces son rápidos y receptivos. Así que si al principio no ves algo después de una construcción, también sé paciente. Espero que esto ayude a alguien más.

Mi app.js final

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
  }
});

Answer 3

Estoy enfrentando el mismo problema. Lo que observé es que WebView no funciona si está anidado. Si el componente solo devuelve WebView, entonces todo está bien.

Answer 4

Me encontré con el mismo problema recientemente. Y encontré eso

alineación: ''centro''

estaba causando el problema para mí. Lo comenté y la webView se cargó de inmediato. Encontré la solución aquí: https://github.com/facebook/react-native/issues/5974 ''brunocvcunha'' la respuesta funcionó para mí.

Answer 5

Permítanme darles el ejemplo más simple que funcionará a la perfección:

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''}} 
    />

    );
  }
}

No agregue su componente WebView en una vista que haya creado un problema y la URL de webview no se represente, sino que se mostrarán los estilos de vista.

Answer 6

Si desea que el componente represente la página completa, necesita envolverlo con la vista que tiene flex: 1 . El siguiente código funciona para mí:

<View style={{flex:1, alignItems: ''flex-end''}}>
  <WebView
   source={{uri: this.state.webContentLink}}
   startInLoadingState={true}
   scalesPageToFit={true} />
</View>

Answer 7

Tuve el mismo problema y pasé un día intentando solucionarlo. Copié en el ejemplo de webview de UIExplorer, y eso no funcionó.

En última instancia, terminé de actualizar reaccionar y crear un nuevo proyecto nativo de reacción y copiar los archivos allí, y eso lo arregló.

Desearía tener una mejor respuesta de por qué eso lo solucionó, pero espero que eso ayude

Answer 8

Tuve este problema WebView se representaría cuando era el único componente devuelto, pero no cuando estaba anidado en otro componente de Vista.

Por razones que no estoy completamente seguro de que el problema se resolvió configurando una propiedad de ancho en el componente 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
  }
});

Answer 9

WebView funciona bien en Android. Sin embargo, debe habilitar el almacenamiento de JavaScript y dom para algunas páginas web.

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

Answer 10

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

y el estilo de la siguiente manera:

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
  }
};

Todo esto para lidiar con una dimensión incorrecta de webview, así que solo establece una altura específica y un ancho específico (deviceHeight y deviceWidth como en el ejemplo anterior).