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;

回答1:

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

Solution

Install new WebView Package using this command

npm install --save react-native-webview

You can find more information regarding package installation from here

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;

However you can find all the information about new WebView from here

来源：https://stackoverflow.com/questions/60073079/how-to-fix-webview-has-been-removed-from-react-native-it-can-now-be-install-and

标签

android

reactjs

react-native

react-native-android