如何将REACT集成到React Antive WebView中

我正在开发一个反应本机项目。我有一个（仅）React组件，必须将其集成到我的React Antive应用程序中。我已经尝试使用React Native WebView，但是我在ReactDom上遇到了错误。

有没有办法与React Native Web视图集成？谢谢

反应天然

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;

首先，您在localhost上运行react项目，然后下载library react-native-webview（https://www.npmjs.com/package/package/react-native-webview）弃用的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

相关内容

最新更新

热门标签：