创建 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 的演示内容

这是我从上面link复制的代码

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

Just Try this if it worked then you don't have img folder where the image name of favicon.png. if it works then change this image url to local image url. That should works.

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 示例错误

Create React Native App ScrollView Example Errors

macos

npm

react-native

create-react-native-app