React Native WebView动态URI切换报错：元素类型无效求助

核心错误点拆解 #

• 导出对象错误：你最终导出的是组件内部定义的app函数，而非顶层的WebViewExample组件，React无法将内部函数识别为合法的根组件。
• 未定义函数调用：渲染逻辑中调用了renderWebView()，但代码里从未声明这个函数，会触发运行时错误。
• 组件导入错误：react-native核心库没有Icon、BottomNavigation、BottomNavigationTab这些组件，你混淆了第三方UI库（如react-native-paper）的导入路径，导致这些组件为undefined，直接触发类型错误提示。

分步修复方案 #

1. 修正组件导出
   将末尾的export default app;改为export default WebViewExample;，确保导出的是你的根组件。

2. 修复未定义函数调用
   删除内部的app函数，直接在JSX中渲染WebView组件，或者将{renderWebView()}替换为{app()}（推荐前者，简化代码结构）。

3. 修正第三方组件导入
   若使用react-native-paper的底部导航组件，先安装依赖：

   npm install react-native-paper
   

   再调整导入语句：

   import { BottomNavigation, BottomNavigationTab, Icon } from 'react-native-paper';
   

修正后的完整代码 #

import React, { useState } from 'react';
import WebView from 'react-native-webview';
import { View } from 'react-native';
import { BottomNavigation, BottomNavigationTab, Icon } from 'react-native-paper';

const HomeIcon = (props) => <Icon {...props} source="home" />;
const ContactUsIcon = (props) => <Icon {...props} source="contacts" />;

const WebViewExample = () => {
  const [currentUrl, setCurrentUrl] = useState('https://www.example.com');
  const [selectedIndex, setSelectedIndex] = useState(0);

  const handleTabPress = (index) => {
    setSelectedIndex(index);
    if (index === 0) {
      setCurrentUrl('https://www.example.com/home');
    } else if (index === 1) {
      setCurrentUrl('https://www.example.com/contact-us');
    }
  };

  return (
    <View style={{ flex: 1 }}>
      <WebView source={{ uri: currentUrl }} style={{ flex: 1 }} />
      <BottomNavigation 
        selectedIndex={selectedIndex} 
        onTabPress={({ index }) => handleTabPress(index)}
      >
        <BottomNavigationTab title="Home" icon={HomeIcon} />
        <BottomNavigationTab title="Contact Us" icon={ContactUsIcon} />
      </BottomNavigation>
    </View>
  );
};

export default WebViewExample;

额外注意事项 #

• 确保react-native-webview已安装：未安装时执行npm install react-native-webview。
• react-native-paper的Icon组件使用source属性而非name，需对应调整。
• 给WebView添加flex:1样式，确保它占满容器空间，避免显示异常。

内容的提问来源于stack exchange，提问作者user1362140