無法導出組件 React Native

Question

我是 React Native 的新手，並試圖從 React 中實現我的一些知識，例如在這種情況下：function 組件。 但是，在我稍微更改了布局之后，它顯示了我沒有導出組件的錯誤。 這是錯誤：

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of 'App'.

這是組件的快照：

import { StatusBar } from "expo-status-bar";
import React, { useState } from "react";
import {
    StyleSheet,
    Text,
    View,
    Card,
    Background,
    Logo,
    Header,
    Title,
    Button,
    Divider,
} from "react-native";
import AudioRecorderPlayer, {
    AVEncoderAudioQualityIOSType,
    AVEncodingOption,
    AudioEncoderAndroidType,
    AudioSet,
    AudioSourceAndroidType,
} from "react-native-audio-recorder-player";

const App = () => {
    const [initialtime, setInitialTime] = useState({
        isLoggingIn: false,
        recordSecs: 0,
        recordTime: "00:00:00",
        currentPositionSec: 0,
        currentDurationSec: 0,
        playTime: "00:00:00",
        duration: "00:00:00",
    });
    const audioRecorderPlayer = new AudioRecorderPlayer();
    audioRecorderPlayer.setSubscriptionDuration(0.09);
    return (
        <Card
            style={{
                flex: 1,
                flexDirection: "row",
                alignItems: "center",
                alignContent: "center",
                alignSelf: "center",
            }}
        >
            <Background>
                <Logo />
                <Header>InstaPlayer</Header>
                <Title>{initialtime[2]}</Title>
            </Background>
        </Card>
    );
};

export default App;

導入 App.js 的文件是 node_modules/expo/AppEntry.js 中的 AppEntry.js，內容如下：

import registerRootComponent from 'expo/build/launch/registerRootComponent';

import App from '../../src/App';

registerRootComponent(App);

有人對此有答案或有類似情況嗎？ 任何信息都會有所幫助。 謝謝

Answer 1

試試這個版本

import { StatusBar } from "expo-status-bar";
import React, { useState } from "react";
import {
    StyleSheet,
    Text,
    View,
    Card,
    Background,
    Logo,
    Header,
    Title,
    Button,
    Divider,
} from "react-native";
import AudioRecorderPlayer, {
    AVEncoderAudioQualityIOSType,
    AVEncodingOption,
    AudioEncoderAndroidType,
    AudioSet,
    AudioSourceAndroidType,
} from "react-native-audio-recorder-player";

class App extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {

    const [initialtime, setInitialTime] = useState({
        isLoggingIn: false,
        recordSecs: 0,
        recordTime: "00:00:00",
        currentPositionSec: 0,
        currentDurationSec: 0,
        playTime: "00:00:00",
        duration: "00:00:00",
    });
    const audioRecorderPlayer = new AudioRecorderPlayer();
    audioRecorderPlayer.setSubscriptionDuration(0.09);

    return (
      <Card
            style={{
                flex: 1,
                flexDirection: "row",
                alignItems: "center",
                alignContent: "center",
                alignSelf: "center",
            }}
        >
            <Background>
                <Logo />
                <Header>InstaPlayer</Header>
                <Title>{initialtime[2]}</Title>
            </Background>
        </Card>
    );
  }
}

export default App;

Answer 2

這就是我的代碼在第一個文件中的樣子。

import {AppRegistry} from 'react-native';
import App from './App';

AppRegistry.registerComponent('App Name', () => App);