如何将React集成到React Native WebView中？

Question

如何将React集成到React Native WebView中？

8

我正在开发一个React Native项目。我有一个（唯一的）React组件，我必须将其集成到我的React Native应用程序中。我已经尝试过使用React Native WebView，但是在ReactDOM上出现了错误。

有没有一种方法可以与React Native WebView集成？谢谢

React Native

import React from "react"
import { WebView } from 'react-native'

class TVView extends React.Component{
    render(){
        return (
            <WebView
                source={require('../TV/Resources/public/index.html')}
                injectedJavaScript={require('../TV/Resources/src/index.html')}
                style={{flex: 1}}
                />
        );
    }
}

export default TVChartView

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">      
        <title>Demo</title>
    </head>
    <body>
        <div id="root"></div>
    </body>
</html>

index.js

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
import './index.css';

ReactDOM.render(
    React.createElement(App),
    document.getElementById('root')
);

App.js

import * as React from 'react';
import './App.css';
import { TVContainer } from './components/TVContainer/index';

class App extends React.Component {
    render() {
        return (
            <div className={ 'App' }>
                <header className={ 'App-header' }>
                    <h1 className={ 'App-title' }>
                       Example
                    </h1>
                </header>
                <TVContainer />
            </div>
        );
    }
}

export default App;

- zp26

我从未尝试过这个，但我认为你应该编译你的React DOM项目，并通过injectedJavaScript属性注入。然后将根HTML传递给source属性。 - Luis Gurmendez

请注意，您正在将HTML传递给injectedJavaScript属性。 - Luis Gurmendez

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Force Bolt · Accepted Answer

首先在本地主机上运行React项目，然后下载库react-native-webview (https://www.npmjs.com/package/react-native-webview)，因为react-native已经弃用了WebView。

import React from "react"
import {WebView} from 'react-native-webview';

class TVView extends React.Component{
    render(){
        return (
            <WebView
                source={{uri:'localhost:3000/}}
                injectedJavaScript={`const meta = document.createElement('meta'); meta.setAttribute('content', 'width=device-width, initial-scale=0.5, maximum-scale=0.5, user-scalable=0'); meta.setAttribute('name', 'viewport'); document.getElementsByTagName('head')[0].appendChild(meta); `}

                style={{flex: 1}}
                />
        );
    }
}

export default TVChartView