Intento cargar el local .html archivo en WebView en Reaccionar Nativo:

//load local .html file
const PolicyHTML = require('./Policy.html');

//PolicyHTML is just a number of `1`
console.log('PolicyHTML:', PolicyHTML);

//will cause an error: JSON value '1' of type NSNumber cannot be converted to NSString
<WebView html={PolicyHTML} />

La .html archivo debe ser leído como una cadena de caracteres, no un representante de recursos.

¿Cómo puedo cargar el .html archivo en WebView en Reaccionar Nativo?


Por cierto, ¿cuál es el tipo de los representantes del recurso de require()? Es number?

  • Ha encontrado una solución para esto? Por favor, actualice la respuesta correcta.
  • no todavía. 🙁
InformationsquelleAutor | 2017-03-17

5 Comentarios

  1. 24

    probarlo:

    const PolicyHTML = require('./Policy.html');
    
    <WebView
      source={PolicyHTML}
      style={{flex: 1}}
     />
    
    • Podría explicar qué este código, o por qué funciona?
    • Funciona en un entorno de desarrollo. En una versión de lanzamiento siga este enlace: github.com/facebook/react-native/issues/505
    • hm, pero yo uso esta solución en iOS versión de lanzamiento, y funciona
    • no. mostrar texto sin formato
  2. 4

    Me encuentro con este post de la búsqueda para la carga estática html.

    Si su código html se recupera mediante, por ejemplo, una API, se puede representar WebView en esta manera:

    <WebView
        originWhitelist={['*']}
        source={{ html: html, baseUrl: '' }}
    />
    

    Aviso que originWhitelistes necesario, como se explica en el documentación:

    Nota que html estático, se requiere la configuración de originWhitelist para
    ejemplo a [«*»].

  3. 3
    <View style={{flex: 1}}>
        <WebView
          style={{flex: 1}}
          source={require("./resources/index.html")}
        />
    </View>
    

    Para hacer WebView, el padre de familia tiene que tiene una dimensión o flex:1. Podríamos establecer el WebView flex: 1 también, así que llena el padre.

  4. 1

    Primero de todo, olvidarse de Webview de reaccionar nativos como va a quedar obsoleto en la próxima versión se puede ver Cargar Archivo HTML Local o la dirección URL en Reaccionar Nativo usando reaccionar-nativo-webview. Así que he utilizado reaccionar-nativo-webview en mi proyecto y se está trabajando bien ahora.

    Punto a señalar:

    1. Usted tiene que manejar dos copias de su archivo HTML.
    2. Para IOS poner una copia en el Proyecto> recursos>index.html.
    3. Para Android, usted necesita para poner en project>android>aplicación>src>principal>activos>index.html

    Y mientras se carga el webview tratar de encontrar la plataforma y carga con el es otra cosa, como este.

    if(isAndroid){
      return (
          <WebView
            style={{flex: 1}}
            originWhitelist={['*']}
            source={{uri:'file:///android_asset/index.html'}}
            style={{ marginTop: 20 }}
            javaScriptEnabled={true}
            domStorageEnabled={true}
          />
      )
    }else{
      return(
        <WebView
          style={{flex: 1}}
          originWhitelist={['*']}
          source={'./resources/index.html'}
          style={{ marginTop: 20 }}
          javaScriptEnabled={true}
          domStorageEnabled={true}
        />
      );
    }
    
  5. 0

    Intente esto :

    • Agregar su .html archivo en el proyecto.
    • De escribir líneas de código en el archivo donde desea utilizar el Componente WebView

      const OurStoryHTML = require ('./OurStory.html')

    • <WebView
      source={OurStoryHTML}
      style={{flex: 1, marginTop : 44}}
      />

    Puede ayudar.

Dejar respuesta

Please enter your comment!
Please enter your name here