React native React Native：显示图像时出现问题

我正在尝试使用React Native提供的文档在我的应用程序中显示图像。代码是

唯一相关的文件是包含代码的app.js文件。该图像与app.js文件位于同一文件夹中。有人能帮我弄清楚为什么这可能不起作用吗？ 这一行代码是：

 <Image source={require('./practicialogo.PNG')} />

我发现两个错误： 1.无法解析文件路径（我不理解，因为图像与文件2位于同一文件夹中）。ES Lint在我调用图像的那一行上给了我一个意外的require（）（全局require）错误

以下是整个文件：

import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import { StackNavigator } from 'react-navigation';
import { Button } from 'react-native-elements';

//import { Button } from './src/components/Button';
//import { CardSection } from './src/components/CardSection';


class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'WELCOME!'
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View>
        <Image source={require('./practicialogo.PNG')} />
        <Text>Hello, Chat App!</Text>

        <Button
        raised
        backgroundColor="#3399ff"
        borderRadius="20"
          onPress={() => navigate('Chat', { user: 'Lucy' })}
          title="CHAT WITH LUCY"
        />
      </View>
    );
  }
}

class ChatScreen extends React.Component {
  static navigationOptions = ({ navigation }) => ({
    title: `Chat with ${navigation.state.params.user}`,
  });
  render() {
    const { params } = this.props.navigation.state;
    return (
      <View>
        <Text>Chat with {params.user}</Text>
      </View>
    );
  }
}


const SimpleApp = StackNavigator({
  Home: { screen: HomeScreen },
  Chat: { screen: ChatScreen }

});

export default class App extends React.Component {
  render() {
    return <SimpleApp />;
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    alignItems: 'center',
    justifyContent: 'center'
  }
});

从“React”导入React；
从“react native”导入{样式表、文本、视图、图像}；
从“react navigation”导入{StackNavigator}；
从“react native elements”导入{Button}；
//从“./src/components/Button”导入{Button}；
//从“./src/components/CardSection”导入{CardSection}；
类主屏幕扩展了React.Component{
静态导航选项={
标题：“欢迎！”
};
render（）{
const{navigate}=this.props.navigation；
返回(
你好，聊天应用程序！
导航（'Chat'，{user:'Lucy'}）}
title=“与露西聊天”
/>
);
}
}
类ChatScreen扩展了React.Component{
静态导航选项=（{navigation}）=>({
标题：`Chat with${navigation.state.params.user}`，
});
render（）{
const{params}=this.props.navigation.state；
返回(
与{params.user}聊天
);
}
}
const simpleap=StackNavigator({
主屏幕：{屏幕：主屏幕}，
聊天：{screen:ChatScreen}
});
导出默认类App扩展React.Component{
render（）{
返回；
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“白色”，
对齐项目：“居中”，
为内容辩护：“中心”
}
});

这是eslint的规则之一，使用require only on top作为全局引用

从

在Node.js中，使用require（）包含模块依赖项 功能，例如：

var fs = require("fs");

虽然require（）可以在代码中的任何地方调用，但有些样式指南 规定只能在模块的顶层调用它 使其更容易识别依赖项。例如 当依赖项嵌套得很深时，很难识别它们 函数和其他语句的内部：

但是，您可以使用

//eslint disable line global require

注释为该依赖项禁用此规则。例如，如果要在jsx中禁用它：

  <View>
        {/* eslint-disable-line global-require */}
        <Image source={require('./practicialogo.PNG')} />
        <Text>Hello, Chat App!</Text>

{/*eslint禁用行全局要求*/}
你好，聊天应用程序！

我尝试要求图像扩展名为大写，但它不起作用，无法解析

---

您可以尝试将practicialogo.

PNG

重命名为practicialogo.

PNG

，然后

require（'./practicialogo.PNG'））

我不会太在意eslint错误。eslint不是上帝，你在RN中必须做的一些事情会让它生气。至于无法解析的路径，我知道你已经尝试了.png小写扩展名。你能将图像重命名为.png小写扩展名，然后再试一次吗？你的代码应该可以工作，所以这是一个简单的问题我能想到。也许把它放在一个“图像”文件夹中，然后从该路径中获取它。我知道它基本上与您已有的相同，但有时只是获取一个图像来显示帮助，然后从那里向后工作

您希望您的代码如下所示：

source={require('./practicialogo.png')} 
source={require('./image/practicialogo.png')} // or with it in an image folder

const myImage = require('myImage.png');

<Image
  source={myImage}
/>

额外的大括号和圆括号可能会使图像无法访问

---

我希望这会有所帮助。您的代码是正确的，所以我能想到的就是为什么它找不到该映像。

我的ESLint错误解决方案是要求在文件顶部放置映像，然后在JSX中引用它们，如下所示：

source={require('./practicialogo.png')} 
source={require('./image/practicialogo.png')} // or with it in an image folder

const myImage = require('myImage.png');

<Image
  source={myImage}
/>

const myImage=require（'myImage.png'）；

如果删除“/”会发生什么？试试这个源代码={require（'/practicialogo.PNG'）}谢谢大家，同样的结果，同样的错误…：）@syedzainallii做了那个更改，也得到了“无法解析消息”您好：非常感谢您的详细解释。现在我得到了这个错误：语法错误。。。意外字符（？）我应该试着在顶部调用它吗？也许我可以引用一个变量并调用该变量？尝试重新启动RN Packager如果我写这行，那么我不会得到任何错误，但是，我没有看到我的图像，但这是另一个问题：这也不会给出任何错误：当我只使用一个parenth时，我会得到致命的错误，Jared。但是感谢您研究这个OK-它现在似乎可以工作了，将文件放入图像文件夹并重命名文件practicialogo.png的单一{}组合似乎已经完成了任务…：）谢谢大家！问题仍然是，图像周围有相当多的空白，将剩余内容向下推到屏幕底部。我们必须弄清楚那里发生了什么。可能会把它作为一个新问题发布。谢谢