创建 React Native App ScrollView 示例错误

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 示例失败了。请提供清楚的说明如何解决此问题。

CRNA 应用一启动，终端就会显示“10:13:14 PM: Failed building JavaScript bundle”。

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>
    );
  }
}