React Native - Import css/js dans WebView

J'ai un WebView avec des liens CSS et JS dans la section head. Ils sont tous des liens CDN donc tout fonctionne bien.React Native - Import css/js dans WebView

Est-il possible d'importer directement ce CSS/JS à partir du dossier node_modules?

Ainsi, par exemple, si je veux importer le CSS bootstrap dans le WebView

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">

œuvres, mais <link rel="stylesheet" href="./bootstrap.min.css">

ne fonctionne pas (permet de dire à des fins de test je mets le fichier dans le même dossier que mon composant avec le webview)

S'il vous plaît laissez-moi savoir si vous avez besoin de voir plus de code ou la question n'est pas claire. En outre, bootstrap est juste utilisé comme exemple ici. THX!

Source

2017-05-11 Jean

Vous pouvez importer comme html normal:

var bootstrap = `<!DOCTYPE html> 
        <html> 
        <head> 
         <link href="bootstrap.min.css" rel="stylesheet" /> 
         <style type="text/css"> 
         img{ 
          max-width: 100%; 
         } 
         </style> 
        </head> 
        <body>X</body></html>`; 
bootstrap = bootstrap.replace('X', html); 
return (
<WebView 
     source={{html: bootstrap}} 
     style={{marginTop: 20}} 
    /> 
);

où html est votre contenu, et vous devez copier le style ou comme et personnaliser à vos besoins. Cela a fonctionné pour moi bien

Source

2017-06-27 01:28:44

React Native - Import css/js dans WebView

Répondre

Questions connexes