Question

我通过在终端发布

创建了遵循CreateNative GetStarted步骤的CRNA应用程序

npm install -g create-react-native-app

这会创建应用程序AwesomeProject，内部是App.js文件，即应用程序。我将该文件的内容替换为演示内容，了解如何使用位于http://facebook.github.io/react-native/docs/using-a-scrollview.html的ScrollView

以下是我从上面链接中复制的代码

import React, { Component } from 'react';
import { AppRegistry, ScrollView, Image, Text } from 'react-native';

export default class IScrolledDownAndWhatHappenedNextShockedMe extends Component {
  render() {
      return (
        <ScrollView>
          <Text style={{fontSize:96}}>Scroll me plz</Text>
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Text style={{fontSize:96}}>If you like</Text>
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Text style={{fontSize:96}}>Scrolling down</Text>
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Text style={{fontSize:96}}>What's the best</Text>
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Text style={{fontSize:96}}>Framework around?</Text>
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Text style={{fontSize:80}}>React Native</Text>
        </ScrollView>
    );
  }
}

// skip these lines if using Create React Native App
AppRegistry.registerComponent(
  'AwesomeProject',
  () => IScrolledDownAndWhatHappenedNextShockedMe);

但是，这会在终端显示错误，如下所示，并且在设备上显示模块./img/favicon.png未知。我尝试将img目录和favicon.png文件添加到AwesomeProject的根目录以及node_modules内部，但错误仍然存在。

请注意我昨天刚刚开始学习ReactNative，我将逐一介绍示例，但这个ScrollView示例失败了。请详细说明如何解决此问题。

终端显示＆＃34; 10:13:14 PM: Failed building JavaScript bundle＆＃34;一旦CRNA应用程序启动。

Answer 1

您需要将img目录与favicon.png相对于指定要求的文件相加。

假设您的src/index.js有一行import favicon from './img/favicon.png'或const icon = require('./img/favicon.png')，那么您的文件必须位于src/img/favicon.png。

Answer 2

试试这个，如果它有效，那么你没有img文件夹的地方 favicon.png的图片名称。如果它工作，然后将此图像网址更改为本地图片网址。这应该有效。

import React, { Component } from 'react';
import { ScrollView, Image, Text } from 'react-native';

export default class IScrolledDownAndWhatHappenedNextShockedMe extends Component {
  render() {
      return (
        <ScrollView>
          <Text style={{fontSize:96}}>Scroll me plz</Text>
          <Image source={'https://pbs.twimg.com/profile_images/763061332702736385/KoK6gHzp.jpg'} />
          <Image source={'https://pbs.twimg.com/profile_images/763061332702736385/KoK6gHzp.jpg'} />
          <Image source={'https://pbs.twimg.com/profile_images/763061332702736385/KoK6gHzp.jpg'} />
          <Image source={'https://pbs.twimg.com/profile_images/763061332702736385/KoK6gHzp.jpg'} />
          <Image source={'https://pbs.twimg.com/profile_images/763061332702736385/KoK6gHzp.jpg'} />
          <Text style={{fontSize:96}}>If you like</Text>
          <Image source={'https://pbs.twimg.com/profile_images/763061332702736385/KoK6gHzp.jpg'} />
          <Image source={'https://pbs.twimg.com/profile_images/763061332702736385/KoK6gHzp.jpg'} />
          <Image source={'https://pbs.twimg.com/profile_images/763061332702736385/KoK6gHzp.jpg'} />
          <Image source={'https://pbs.twimg.com/profile_images/763061332702736385/KoK6gHzp.jpg'} />
          <Image source={'https://pbs.twimg.com/profile_images/763061332702736385/KoK6gHzp.jpg'} />
          <Text style={{fontSize:96}}>Scrolling down</Text>
          <Image source={'https://pbs.twimg.com/profile_images/763061332702736385/KoK6gHzp.jpg'} />
          <Image source={'https://pbs.twimg.com/profile_images/763061332702736385/KoK6gHzp.jpg'} />
          <Image source={'https://pbs.twimg.com/profile_images/763061332702736385/KoK6gHzp.jpg'} />
          <Image source={'https://pbs.twimg.com/profile_images/763061332702736385/KoK6gHzp.jpg'} />
          <Image source={'https://pbs.twimg.com/profile_images/763061332702736385/KoK6gHzp.jpg'} />
          <Text style={{fontSize:96}}>What's the best</Text>
          <Image source={'https://pbs.twimg.com/profile_images/763061332702736385/KoK6gHzp.jpg'} />
          <Image source={'https://pbs.twimg.com/profile_images/763061332702736385/KoK6gHzp.jpg'} />
          <Image source={'https://pbs.twimg.com/profile_images/763061332702736385/KoK6gHzp.jpg'} />
          <Image source={'https://pbs.twimg.com/profile_images/763061332702736385/KoK6gHzp.jpg'} />
          <Image source={'https://pbs.twimg.com/profile_images/763061332702736385/KoK6gHzp.jpg'} />
          <Text style={{fontSize:96}}>Framework around?</Text>
          <Image source={'https://pbs.twimg.com/profile_images/763061332702736385/KoK6gHzp.jpg'} />
          <Image source={'https://pbs.twimg.com/profile_images/763061332702736385/KoK6gHzp.jpg'} />
          <Image source={'https://pbs.twimg.com/profile_images/763061332702736385/KoK6gHzp.jpg'} />
          <Image source={'https://pbs.twimg.com/profile_images/763061332702736385/KoK6gHzp.jpg'} />
          <Image source={'https://pbs.twimg.com/profile_images/763061332702736385/KoK6gHzp.jpg'} />
          <Text style={{fontSize:80}}>React Native</Text>
        </ScrollView>
    );
  }
}

创建React Native App ScrollView示例错误

2 个答案: