0

我正在构建和应用程序，我试图在导航 forlder 中包含一个名为 Header.js 的组件。我正在整个应用程序中使用功能组件。图像也不起作用。我是 React Native 的新手。

这是错误

Unable to resolve module `./src/navigation/Header` from `src/screens/userprofile/Profilecard.js`:

这些文件都不存在：

  • src/screens/userprofile/src/navigation/Header(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts |.ts|.ios.tsx|.native.tsx|.tsx)
  • src/screens/userprofile/src/navigation/Header/index(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native .ts|.ts|.ios.tsx|.native.tsx|.tsx)

RCTFatal __28-[RCTCxxBridge handleError:]_block_invoke _dispatch_call_block_and_release _dispatch_client_callout _dispatch_main_queue_callback_4CF CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE __CFRunLoopRun CFRunLoopRunSpecific GSEventRunModal -[UIApplication_run] UIApplicationMain 主启动

我不明白我做错了什么我检查了 youtube 上的多个视频，包括（https://www.youtube.com/watch?v=Hf4MJH0jDb4和https://www.youtube.com/watch?v=LEa48P- KtCw )

这是我的 Profile.js，其中包含 Header

import React from 'react';
import { 
View, 
Text, 
StyleSheet, 
Image, 
TouchableOpacity,
} from 'react-native';
import { ScrollView } from 'react-native-gesture-handler';
import { Header } from './src/navigation/Header';


const ProfileCard = () => {

return(
    <ScrollView>
        <View  style={styles.container}>

            <Header/>

            <View style={styles.profileCard}>
                <Text style={styles.cardHeading}>
                    Faithful
                </Text>
                <Image style={styles.cardImg} source={'./assets/img/logo.png'}/>
                <Text style={styles.cardText}>
                    The passage is attributed to an unknown typesetter in the 15th century. Lorem ipsum is a placeholder text commonly used to demonstrate.
                </Text>
                <View style={styles.cardOptions}>
                    <Image style={styles.iconImg} source={'./assets/img/icons/download.png'}/>
                    <Image style={styles.iconImg} source={'./assets/img/icons/heart.png'}/>
                    <Image style={styles.iconImg} source={'./assets/img/icons/share.png'}/>
                </View>
            </View>
        </View>
    </ScrollView>
);

}

这是 Header.js

import React from 'react';
import { 
View, 
Text, 
StyleSheet, 
Image, 
TouchableOpacity,
} from 'react-native';

const Header = () => {
return(
    <View style={styles.header}>

        <TouchableOpacity>
            <Image style={styles.logoImg} source={'./assets/img/logo.png'}/>
        </TouchableOpacity>

        <TouchableOpacity>
            <Image style={styles.profileIcon} source={'./assets/img/icons/avatar.png'}/>
        </TouchableOpacity>

        <TouchableOpacity>
            <Image style={styles.settingsIcon} source={'./assets/img/icons/settings.png'}/>
        </TouchableOpacity>
        
    </View>
);
}
export default Header();

const styles = StyleSheet.create({
    header: {
        flexDirection: 'row',
        backgroundColor: '#fff',
    }
});

文件夹：

src/screens
src/navigation
src/assetes/img
src/assets/fonts
src/other
4

0 回答 0