如何修复 webview 已从 react native 中删除，现在可以从 react-native-webview 安装和导入，而不是 react native [英] How to fix webview has been removed from react native it can now be install and imported from react-native-webview instead of react native

问题描述

import React, { Component } from "react";
import { Text, Button, View, ScrollView } from "react-native";
import Chart from "react-native-f2chart";
import { WebView } from "react-native";
import { Container, Title } from "../components";
import { basePie, labelPie } from "./scripts";

type Props = {};

class PieChartScreen extends PureComponent {
  render() {
    return (
      <ScrollView>
        <Container>
          <View>
            <Title title="基础饼图" />

            <View style={{ height: 250 }}>
              <Chart initScript={basePie} webView={WebView} />
            </View>
          </View>

          <View>
            <Title title="带文本饼图" />

            <View style={{ height: 350 }}>
              <Chart initScript={labelPie} webView={WebView} />
            </View>
          </View>

          <View style={{ height: 20 }} />
        </Container>
      </ScrollView>
    );
  }
}

export default PieChartScreen;

推荐答案

对于您的方案，旧的 WebView 现在已弃用，以提高性能并减少包大小.您可以通过此处

For your scenario Old WebView is now deprecated for better performance and to reduce package sizes. You can find more information about this by here

解决方案

使用此命令安装新的 WebView 包

Install new WebView Package using this command

npm install --save react-native-webview 

您可以从 这里

安装上述包后，现在删除旧的导入并像这样重新导入 WebView

After installing above mentioned package now remove old imports and re-import WebView like this

import { WebView, } from 'react-native'; //Remove this from your imports

import { WebView } from 'react-native-webview'; //Add this to your imports

您的最终代码应如下所示:

Your final code should look like this :

import React, { Component } from 'react';
import { Text, Button, View, ScrollView } from "react-native";
import Chart from "react-native-f2chart";
import { WebView } from 'react-native-webview';  // New changed import
import { Container, Title } from "../components";
import { basePie, labelPie } from "./scripts";

type Props = {}; class PieChartScreen extends PureComponent {

render() {

return (

  <ScrollView>

    <Container>

      <View>

        <Title title="基础饼图" />

        <View style={{ height: 250 }}>

          <Chart initScript={basePie} webView={WebView} />

        </View>
      </View>

      <View>
        <Title title="带文本饼图" />
          <Chart initScript={labelPie} webView={WebView} />

        </View>

      </View>

      <View style={{ height: 20 }} />

    </Container>

  </ScrollView>

);
}

}

export default PieChartScreen;

但是，您可以从此处

这篇关于如何修复 webview 已从 react native 中删除，现在可以从 react-native-webview 安装和导入，而不是 react native的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！