如何使用反应原生网络视图传单?

Question

我正在使用 React Native 和 Expo 来开发一个应用程序。我想整合反应原生网络视图传单。但是，当我想使用标记WebViewLeaflet以便能够将 WMS 与 GeoServer 配合使用时，它会在标记下划线，然后在我将光标悬停时显示此错误。

JSX 元素类型"WebViewLeaflet"没有任何构造或调用签名.ts(2604(

躲猫猫问题 没有可用的快速修复。

当我尝试运行时，出现此错误

有时这个

未

捕获的不变冲突：元素类型无效：预期字符串(对于内置组件(或类/函数(对于复合组件(，但得到：未定义。您可能忘记从定义组件的文件中导出组件 事实上，我已经按照安装步骤进行操作，但对我来说没有任何效果。

其他时候这个

WebView 已从 React Native 中删除。现在可以从"react-native-webview"而不是"react-native"安装和导入它。见 https://github.com/react-native-community/react-native-webview

这是我的代码

import React, {Component} from 'react';
import WebViewLeaflet from 'react-native-webview-leaflet';
import { View } from 'react-native';
export default class Map extends Component{
render(){
return (
<View>
<WebViewLeaflet/>
</View>
)
}
}

Package.json

{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"@react-native-community/masked-view": "^0.1.6",
"expo": "~36.0.0",
"expo-asset": "^8.0.0",
"expo-file-system": "^8.0.0",
"expo-font": "^8.0.0",
"leaflet": "^1.3.4",
"react": "~16.9.0",
"react-dom": "~16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
"react-native-dynamic-vector-icons": "^0.2.1",
"react-native-gesture-handler": "^1.5.3",
"react-native-maps": "^0.26.1",
"react-native-paper": "^2.2.2",
"react-native-reanimated": "^1.5.0",
"react-native-safe-area-context": "^0.6.2",
"react-native-screens": "^2.0.0-alpha.12",
"react-native-vector-icons": "^6.6.0",
"react-native-web": "~0.11.7",
"react-native-webview-leaflet": "^4.3.4",
"react-navigation": "^4.0.10",
"react-navigation-drawer": "^2.3.3",
"react-navigation-material-bottom-tabs": "^2.1.5",
"react-navigation-stack": "^2.0.15",
"react-navigation-tabs": "^2.7.0"
},
"devDependencies": {
"@types/react": "~16.9.0",
"@types/react-native": "~0.60.23",
"@babel/core": "^7.0.0",
"babel-preset-expo": "~8.0.0",
"typescript": "~3.6.3"
},
"private": true
}

Answer 1

import {
WebViewLeaflet, WebViewLeafletEvents, MapShapeType, Marker, Popup,
AnimationType, INFINITE_ANIMATION_ITERATIONS
} from 'react-native-webview-leaflet';

尝试像上面一样导入反应原生网络视图传单