无法在本机反应中导出组件答案

【问题标题】：Can't export component in react native无法在本机反应中导出组件
【发布时间】：2022-10-14 22:00:07
【问题描述】：

我想将 2 个组件导入 App.js 组件，但由于某些奇怪的原因，其中一个导入会导致此错误：

错误：元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：对象。检查MyWebComponent的渲染方法。此错误位于：在 RCTView 中（由 View 创建）在视图中（由 MyWebComponent 创建）在 MyWebComponent 中（由 App 创建）

我尝试使用大括号导入组件，没有它们，错误保持不变。

这是代码：

MyWebComponent.js

import { useState } from "react";
import WebView from "react-native";
import { ActivityIndicator, View } from "react-native";

const MyWebComponent = (uri) => {
  const [visible, setVisible] = useState(true);

  return (
    <View style={{ flex: 1 }}>
      <WebView
        source={uri}
        onLoadStart={() => setVisible(true)}
        onLoadEnd={() => setVisible(false)}
      ></WebView>
      {visible && (
        <ActivityIndicator
          style={{
            backgroundColor: "rgba(52, 52, 52, 0.8)",
            position: "absolute",
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            jusityContent: "space-around",
            flexWrap: "wrap",
            alignContent: "center",
          }}
          size="large"
        ></ActivityIndicator>
      )}
    </View>
  );
};

export default MyWebComponent;

此组件已成功导入（FadeInView）：

import React, { useRef, useEffect } from "react";
import { Animated } from "react-native";

const FadeInView = (props) => {
  const fadeAnim = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    Animated.timing(fadeAnim, {
      toValue: 1,
      duration: 3000,
      useNativeDriver: true,
    }).start();
  }, [fadeAnim]);

  return (
    <Animated.View
      style={{
        ...props.style,
        opacity: fadeAnim,
      }}
    >
      {props.children}
    </Animated.View>
  );
};

export default FadeInView;

这就是我导入的方式：应用程序.js

import FadeInView from "./FadeInView";
import MyWebComponent from "./MyWebComponent";

<...>

{showFirstWeb && <MyWebComponent uri="https://www.google.com/" />}
{showSecondWeb && <MyWebComponent uri="https://www.bbc.com/" />}

【问题讨论】：

当您忘记返回关键字时，通常会发生这种情况

标签： javascript react-native

【解决方案1】：

您没有正确导入 WebView。你缺少花括号。

'react-native' 中的 WebView 也已被弃用。

您应该改用https://github.com/react-native-webview/react-native-webview。

【讨论】：