React Native:显示图像的问题

Question

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

唯一有关的文件是具有代码的app.js文件。图像与app.js文件在同一文件夹中。有人可以帮我弄清楚为什么这可能不起作用吗？所讨论的代码线是：

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

我遇到了两个错误：1.无法解析文件的路径（我不理解图像在与文件2中相同的文件夹中。

这是整个文件：

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错误的解决方案是需要文件顶部的图像，然后在JSX中引用它们：

const myImage = require('myImage.png');
<Image
  source={myImage}
/>

Answer 2

我对ESLINT错误并不过分关心。Eslint不是上帝，您在RN中必须做的某些事情将使它生气。至于未解决的路径，我知道您已经尝试了.png小写的扩展。您可以将图像重命名为.png小写扩展名，然后再尝试一下吗？您的代码应该起作用，这就是我能想到的。也许将其放入"图像"文件夹中，并从该路径上需要它。我知道这与您已经拥有的基本相同，但是有时只是获得图像可以显示的帮助，然后从那里向后工作。

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

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

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

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

Answer 3

这是ESLINT到使用的规则之一，仅在全局参考

来自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 4

我尝试要求使用大写扩展名的图像，但它无法正常工作，无法解决。

您可能会尝试重命名您的实践性。PNG到实践。png，然后require('./practicialogo.png')