react-native - react 原生 : Issue with Displaying Image

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

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

<Image
  source={myImage}
/>