Как исправить то, что веб-просмотр был удален из реактивного натива, теперь его можно установить и импортировать из реактивного нативного веб-обзора вместо реактивного нативного - PullRequest
Новая
       2

Как исправить то, что веб-просмотр был удален из реактивного натива, теперь его можно установить и импортировать из реактивного нативного веб-обзора вместо реактивного нативного

1 голос
/ 05 февраля 2020

enter image description here

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 Ответ

0 голосов
/ 07 февраля 2020

Для вашего сценария Old WebView теперь не рекомендуется для повышения производительности и уменьшения размеров пакетов. Вы можете найти более подробную информацию об этом по здесь

Solution

Установить новый пакет WebView с помощью этой команды 

npm install --save react-native-webview

Вы можете найти более подробную информацию об установке пакета из здесь

После установки вышеупомянутого пакета теперь удалите старый импорт и повторно импортируйте WebView следующим образом 

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

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

Ваш окончательный код должно выглядеть так: 

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 вы можете найти здесь

...