Image 在react native中找不到该模块

我是一个新的反应本土发展。我有一个登录屏幕，在那个登录屏幕上我有一个徽标图像，因为我把图像保存在资源文件夹中，并在代码中给出了路径。但无法解析模块

我不知道为什么会发生这个错误

下面是代码

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

export default class App extends Component {
  static navigationOptions = {
    title: "Welcome",
    header: null,
  }
  render() {
    // const { navigate } = this.props.navigation
    return (
      <View style={styles.container}>
      <StatusBar
          barStyle="light-content"
          backgroundColor="#003366"
        />
        <Text style={styles.welcome}>SEDC</Text>
        <View style={styles.user}>
          <Image source={require('./resource/ic_userid.png')}/>
          <TextInput placeholder="Acct No/User Id" style={styles.textInput} underlineColorAndroid={'rgb(0,0,0)'}></TextInput>
        </View>
      <TextInput placeholder="Password" style={styles.textInput} underlineColorAndroid={'rgb(0,0,0)'}></TextInput>
      <TouchableOpacity style={styles.btn} onPress={this.login}><Text style={{color: 'white'}}>Log In</Text></TouchableOpacity>
      </View>
    );
  }

  login=()=>{
    // alert("testing......");
    this.props.navigation.navigate('Profile');
}
}

import React，{Component}来自'React'；
从“react native”导入{样式表、文本、视图、文本输入、TouchableOpacity、状态栏、图像}；
导出默认类应用程序扩展组件{
静态导航选项={
标题：“欢迎”，
标题：null，
}
render（）{
//const{navigate}=this.props.navigation
返回(
SEDC
登录
);
}
登录=（）=>{
//警报（“测试……”）；
this.props.navigation.navigate（'Profile'）；
}
}

下面是VisualStudio中的项目视图

代码在Login.js中，图像在资源文件夹中。但是为什么会出现下面的错误呢。这是图像代码

<Image source={require('./resource/ic_userid.png')}/>

但这是一个非常小的问题和重复，但我不知道为什么会出现错误。所以请指导我怎么做

---

提前感谢

请尝试此

而不是使用此

请尝试此
而不是使用此
您所点击的图像位于错误的目录中。您正在/components中查找资源目录

<Image source={require('../../resource/ic_userid.png')}/>

您正在点击的图像位于错误的目录中。您正在/components中查找资源目录

<Image source={require('../../resource/ic_userid.png')}/>

感谢您的快速回复@JRK感谢您的快速回复@JRK