無法在 react-native WebView 中使用本機 iOS 組件

Question

我有一個本機 swift 組件PhoneWebView我使用它來顯示單擊以通過在我的 JS 文件中繼承它來調用電話鏈接 Web 視圖。 盡管我在之前的文件調用中使用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'