Question

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

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

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

我收到两个错误： 1.无法解析文件路径（我不理解，因为图像与文件2位于同一文件夹中.ES Lint在我调用图像的那一行给出了一个意外的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'
  }
});

Answer 1

我不会过多关注自我错误。 Eslint不是上帝，你必须在RN做的一些事情会让它生气。至于未解决的路径，我知道你已经尝试过.png小写扩展。您可以将图像重命名为.png小写扩展名，然后再次尝试吗？你的代码应该有用，所以我能想到的就是这些。也许把它放在'image'文件夹中并从该路径中获取它。我知道它与您已有的基本相同，但有时只是让图像显示有帮助，然后从那里向后工作。

您希望代码看起来像这样：

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

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

我希望有所帮助。你的代码是正确的，所以我可以想到它为什么找不到那个图像。

Answer 2

这是从eslint到使用require仅作为全局参考

的规则之一

来自eslint docs

在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>

Answer 3

我尝试过要求使用大写扩展名的图片并且它无法正常工作并无法解决。

您可以尝试将您的practicialogo。PNG重命名为practicialogo。png，然后require('./practicialogo.png')

Answer 4

我对ESLint错误的解决方案是要求在文件顶部添加图像，然后像这样在JSX中引用它们：

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

<Image
  source={myImage}
/>

React Native：显示图像的问题

4 个答案: