React (Natif) Charger un fichier HTML local dans WebView

J'essaie de charger le local .html fichier dans WebView dans Réagir Natif:

//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 fichier doit être lu comme une chaîne, et non en tant que représentant des ressources.

Comment puis-je charger le .html fichier dans WebView à Réagir Natif?

En passant, quel est le type de ces ressources représentants de require()? Est-il number?

Avez-vous trouvé une solution pour cela? Veuillez mettre à jour la bonne réponse.
pas encore de. 🙁

OriginalL'auteur | 2017-03-17

  1. 23

    essayer:

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

<WebView
  source={PolicyHTML}
  style={{flex: 1}}
 />
    Pourriez-vous expliquer ce que ce code n', ou pourquoi Ça marche?
    Il fonctionne dans un environnement de développement. Dans une version, suivez ce lien: github.com/facebook/react-native/issues/505
    hm, mais je utiliser cette solution sur la version d'iOS construire, et il fonctionne
    pas de. il montre en texte brut

    OriginalL'auteur Fmussap

  2. 4

    Je viens sur ce post à la recherche pour le chargement de la page html statique.

    Si votre code html est récupéré à l'aide, par exemple, une API, vous pouvez vous rendre WebView de cette façon:

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

    Avis que originWhitelistest nécessaire, comme expliqué dans le la documentation:

    Noter que html statiques, il faudra établir de originWhitelist pour
    exemple à ["*"].

    OriginalL'auteur Luca Davanzo

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

    De faire WebView, le parent doit a une dimension ou flex:1. Nous pourrions définir la WebView de flex: 1, alors qu'il remplit les parents.

    OriginalL'auteur stevemu

  4. 0

    Essayez ceci :

    • Ajouter votre .html fichier dans votre projet.

    • Écrire ces lignes de code dans le fichier où vous voulez utiliser le Composant WebView

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

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

    Il peut vous aider.

    OriginalL'auteur Pankaj Sharma

  5. 0

    Tout d'abord, oubliez les Webview de réagir indigènes comme il va être obsolète dans la prochaine version, vous pouvez voir Charger Fichier HTML Local ou une URL à Réagir Natif à l'aide de réagir-native-webview. J'ai donc utilisé réagir-native-webview dans mon projet et il fonctionne très bien maintenant.

    Point à noter:

    1. Vous avez à gérer deux copies de votre fichier HTML.
    2. Pour IOS mettre une copie dans Project> ressources>index.html.
    3. Pour Android, vous avez besoin de le mettre dans project>android>app>src>>atouts>index.html

    Et lors du chargement de la webview essayer de trouver la plate-forme et la charge à l'aide de la est autre chose de ce genre.

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

    OriginalL'auteur snehal agrawal