在react native中找不到该模块

Question

我是新来响应本地开发的人。我在登录屏幕中有登录屏幕，我有徽标图像，为此我将图像保存在资源文件夹中并在代码中指定了该路径。但是无法解析模块。

为什么不知道此错误？

以下是代码

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');
}
}

以下是Visual Studio中的项目视图。

代码位于Login.js中，图像位于资源文件夹中。但是为什么风箱错误来了。这是图片代码

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

但这是一个非常小的问题，并且重复，但是我不知道为什么会出现错误。因此，请指导我如何执行此操作。

预先感谢

Answer 1

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

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

记住./表示当前目录。

您的应用目录如下：

App.js
  - app
    - components
      - Login

Answer 2

只需尝试使用此<Image source={require('../../resource/ic_userid.png')}/>，而不要使用此<Image source={require('./resource/ic_userid.png')}/>