我正在尝试使用 Expo 和 TypeScript 来设置一个简单的 React Native 应用程序,以显示 WebView。我的App.tsx
文件包含以下内容:
import Constants from 'expo-constants';
import { StyleSheet } from 'react-native';
import { WebView } from 'react-native-webview';
export default function App() {
return (
<WebView
style={styles.container}
source={{ uri: 'https://example.com/' }}
/>
);
}
const styles = StyleSheet.create({
container: {
marginTop: Constants.statusBarHeight,
},
});
此代码可以正常工作,但 TypeScript 编译器会在 WebView 组件中引发错误。
App.tsx:7:4 - error TS2786: 'WebView' cannot be used as a JSX component.
Its instance type 'WebView<{ style: { marginTop: number; }; source: { uri: string; }; }>' is not a valid JSX element.
The types returned by 'render()' are incompatible between these types.
Type 'import("C:/example/node_modules/@types/react/index").ReactNode' is not assignable to type 'React.ReactNode'.
Type '{}' is not assignable to type 'ReactNode'.
Type '{}' is missing the following properties from type 'ReactPortal': key, children, type, props
7 <WebView
~~~~~~~
Found 1 error.
我正在使用以下版本的依赖项:
{
"dependencies": {
"expo": "~44.0.0",
"expo-status-bar": "~1.2.0",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "0.64.3",
"react-native-web": "0.17.1",
"react-native-webview": "11.15.0"
},
"devDependencies": {
"@babel/core": "^7.12.9",
"@types/react": "~17.0.21",
"@types/react-native": "~0.64.12",
"typescript": "~4.3.5"
}
}
我该如何纠正这个错误?