无法在本机 WebView 中使用本机 iOS 组件

Question

我有一个本机 swift 组件 PhoneWebView 我用它来显示点击调用 phone 链接 Web 视图，方法是在我的 JS 文件中继承它。虽然我在之前的文件调用中使用 if(Platform.OS === 'ios'){ 来显示 iOS 和 Android 的不同内容，但我仍然收到以下错误，不确定缺少什么。有人可以纠正我吗？

https://i.stack.imgur.com/pTQtS.png

ERROR    Invariant Violation: Tried to register two views with the same name ATMWebView

This error is located at:
    in FileRenderWebView (at SceneView.tsx:122)
    in StaticContainer
    in StaticContainer (at SceneView.tsx:115)
    in EnsureSingleNavigator (at SceneVie

    import React, {   } from 'react';
    import {requireNativeComponent, SafeAreaView, StatusBar} from 'react-native';
    import {useFocusEffect} from '@react-navigation/native';
    
    export default function FileRenderWebView({route, navigation}) {    
        const PhoneWebView = requireNativeComponent('ATMWebView');    
        useFocusEffect(
          React.useCallback(() => {            
            console.log("filerenderwebview----****");    
          }, [route.params]))
    
        return (
         <>
                     <StatusBar barStyle="dark-content" />
                     <SafeAreaView style={{flex: 1}}>
                       <PhoneWebView
                         uri="https://www.apple.com/contact/"
                         style={{flex: 1}}
                         onLoaded={pageLoaded}
                       />
                     </SafeAreaView>                   
         </>
        )
    }

Answer 1

因为直接导入原生UI组件，所以在使用热加载或者快速刷新的时候会重新加载。

我的解决方案：

将 requireNativeComponent 拆分到另一个文件（以防我调用 ATMWebViewComponent.js），如下所示：

import { requireNativeComponent } from 'react-native';

const ATMWebView = requireNativeComponent('ATMWebView');

export default ATMWebView;

然后在你只需要导入它并使用的地方：

import ATMWebView from 'path_to_ ATMWebViewComponent.js_file'

无法在本机 WebView 中使用本机 iOS 组件

Unable to use native iOS component in react-native WebView

javascript

webview

ios

react-native