android - 如何修复 webview 已从 react native 中删除,现在可以从 react-native-webview 安装和导入,而不是 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 以获得更好的性能并减少包大小。您可以在此处找到有关此的更多信息
解决方案
使用此命令安装新的 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 的所有信息
推荐阅读
- sql - 数据表错误未定义索引Codeigniter
- xml - 与 xsltproc 相比不同的 XSLT 处理结果
- sql - SQL:在标量用户定义函数中需要动态逻辑时遇到问题
- javascript - 如何在 JavaScript 中真实地为模拟事件生成时间戳
- c# - 使用 OpenXML 在 word 中创建动态项目的编号列表
- java - Java/Processing,查找文件夹中的文件数量
- node.js - 在 module.exports 内部进行异步函数调用
- java - 在环境模式下更频繁地更新不起作用 - Android Wear / WearOS
- java - 使用 jdbcTemplate 执行不带参数的 SQL 语句时遇到“java.sql.SQLException: Invalid column index”。
- python - 创建两个numpy.ndarray的字典?