macos - 创建 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 示例失败了。请提供明确的解释如何解决这个问题。

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

Answer 1

试试这个，如果它有效，那么你没有 favicon.png 图像名称的 img 文件夹。如果可行，则将此图像 url 更改为本地图像 url。那应该行得通。

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

Answer 2

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

假设您有一个src/index.js类似import favicon from './img/favicon.png'or的行const icon = require('./img/favicon.png')，那么您的文件需要位于src/img/favicon.png.