时间戳

首页 > 解决方案 > 如何将 React 集成到 React Native WebView 中？

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

问题描述

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

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

反应原生

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

索引.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')
);

应用程序.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;

标签： reactjsreact-nativewebview

解决方案

首先在 localhost 上运行 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

推荐阅读