Yêu cầu thg 10 16, 2017 8:17 SA 3537 0 1
  • 3537 0 1
+1

[React Native] Nhúng file js vào Webview

Chia sẻ
  • 3537 0 1

Em đang gặp vấn đề về load file js vào webview trong React Native (Nó ko load đc js vào) Có ai có thể support giúp em đc ko ạ

let html = "... <script type=\"text/javascript\" src="../../assets/myjs.js"></script>..." ;

<WebView
                                    source={{ html: html }}
                                    style={{ flex: 1 }}
                                    javaScriptEnabledAndroid={true} />

1 CÂU TRẢ LỜI


Đã trả lời thg 10 17, 2017 3:54 SA
+2

Mình thử khá nhiều cách nhưng chưa load trực tiếp file js trên local vào Webview được =_= Bạn thử các cách dưới đây xem có được không nhé:

  • Cách 1: sử dụng uri trực tiếp đến web mà bạn muốn hiển thị - live preview
import React, { Component } from 'react';
import { WebView } from 'react-native';

export default class App extends Component {
    render() {
        return (
            <WebView
                source={{uri: 'https://viblo.asia'}}
                style={{flex: 1}}
                mixedContentMode='always'
            />
        );
    }
}
  • Cách 2: import script trực tiếp từ web - live preview
import React, { Component } from 'react';
import { WebView } from 'react-native';

const html = `
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Simple todo with React</title>
    </head>
    <body>
        <div id="app">Hello</div>
        <script type="text/javascript" src="https://doanhpham.github.io/todo/index.4e87939e32afa4a57454.js"></script>
    </body>
    </html>
`;

export default class App extends Component {
    render() {
        return (
            <WebView
                source={{html, baseUrl: 'web/'}}
                style={{flex: 1}}
                mixedContentMode='always'
            />
        );
    }
}
import React, { Component } from 'react';
import { WebView } from 'react-native';

const html = `
    <html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
    </head>
    <body>
        <div id="test-app">Hello world!</div>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <style>body {display: flex; font-size: 2em; justify-content: center; align-items: center;}</style>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#test-app').text('Test done!');
            });
        </script>
    </body>
    </html>
`

export default class App extends Component {
    render() {
        return (
            <WebView
                source={{html, baseUrl: 'web/'}}
                style={{flex: 1}}
                mixedContentMode='always'
            />
        );
    }
}

Ngoài ra trong document về Webview, bạn có thể inject function hoặc script trực tiếp vào Webview như sau:

<WebView
    source={{html, baseUrl: 'web/'}}
    injectedJavaScript='./script.js'
    injectJavaScript={this.injectFunction}
    style={{flex: 1}}
    mixedContentMode='always'
/>
Chia sẻ
thg 10 17, 2017 4:04 SA

Hiện mình đang dùng cách 2, nhưng vì cái load js này khá lâu nên mình muốn cải thiện tốc độ bằng load từ local Mặt khác đây là nhiều file js + file font ... nên ko xài cách 3 đc :-s

thg 10 17, 2017 5:59 SA

Bạn thử dùng <script src="file://path/to/script.js"></script> chưa? File js mình ném vào trong android/app/src/main/assets/...

thg 12 16, 2019 8:34 SA

Trên obj C đặt các file css, js mà trong file html gọi đến trong native, khi build nó sẽ đc thêm vào bản build. Trong file html truy cập link dạng:

<link rel="stylesheet" type="text/css" href="./tvstyle.css"> <script src="./numeral.min.js"></script>
Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí