Question

我正在尝试将getImageForLogo.js内的图像通过循环加载。

该文件如下所示：

const images = {
  logo1: require('../assets/logo1.jpeg'),
  logo2: require('../assets/logo2.png'),
  'logo with space': require('../assets/logo-with-space.jpeg'),
};

export default logos => images[logos];

我的App.js：

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

import getImageForLogo from './utils/getImageForLogo';
import Avatar from './components/Avatar';

export default class App extends React.Component {
  constructor (props) {
    super(props);

    this.state = {
      logos: 'logo1'
    };
  }

  render () {
    const {
      logos
    } = this.state;
    const form = { 'Logo1': 'assets/logo.jpg', 'Logo2': 'assets/logo2.jpg', 'Logo3': 'assets/logo3.jpg' };

    return (
      <View style={styles.appContainer}>
        <View style={styles.titleContainer}>
          <Text style={styles.title}>Title</Text>
        </View>
        <ScrollView style={styles.timerlist}>
          Object.values(form).map((key, val) => (
            <Avatar
              initials="KC"
              size={75}
              key={val}
              source={key}
              backgroundColor={'blue'}
              onPressLinkImage={() => {
                console.log('Pressed!');
              }}
            />
          ));
        </ScrollView>
      </View>
    );
  }
}

我创建了const form只是为了尝试查看循环是否有效。我正在尝试通过以下方式进行循环：

Object.values(form).map((key, val) => (
  <Avatar
    initials="KC"
    size={75}
    key={val}
    source={key}
    backgroundColor={'blue'}
    onPressLinkImage={() => {
      console.log('Pressed!');
    }}
  />
));

但是，当我运行此程序时，应用程序崩溃并显示ReferenceError: Can't find variable: val。我不知道为什么会这样，因为如果我在Chrome终端上运行此代码，它将起作用。

编辑：

这里是Avatar.js：

import {
  ColorPropType,
  StyleSheet,
  Text,
  View,
  Image,
  TouchableOpacity
} from 'react-native';
import PropTypes from 'prop-types';
import React from 'react';

import getImageForLogo from '../utils/getImageForLogo';

export default function Avatar({
  size,
  backgroundColor,
  initials,
  source,
  onPressLinkImage,
}) {
  const style = {
    width: size,
    height: size,
    borderRadius: size / 2,
    backgroundColor,
  };

  const image = getImageForLogo(source)

  return (
    <View style={[styles.container, style]}>
      <TouchableOpacity onPress={onPressLinkImage}>
        <Image source={image} style={styles.image} />
      </TouchableOpacity>
    </View>

  );
}

Avatar.propTypes = {
  initials: PropTypes.string.isRequired,
  size: PropTypes.number.isRequired,
  source: PropTypes.string.isRequired,
  backgroundColor: ColorPropType.isRequired,
  onPressLinkImage: PropTypes.func.isRequired,
};

Answer 1

您App.js中的代码似乎在您的{ }周围缺少了一些Object.values。

因此，不要放入您的ScrollView

Object.values(form).map((key, val) => (
    <Avatar
      initials="KC"
      size={75}
      key={val}
      source={key}
      backgroundColor={'blue'}
      onPressLinkImage={() => {
        console.log('Pressed!');
      }}
    />
  )
);

您应该放

{Object.values(form).map((key, val) => (
    <Avatar
      initials="KC"
      size={75}
      key={val}
      source={key}
      backgroundColor={'blue'}
      onPressLinkImage={() => {
        console.log('Pressed!');
      }}
    />
  )
)}

请注意，它包含在{ }中。

它在您的App.js

中

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

import getImageForLogo from './utils/getImageForLogo';
import Avatar from './components/Avatar';

export default class App extends React.Component {
  constructor (props) {
    super(props);

    this.state = {
      logos: 'logo1'
    };
  }

  render () {
    const {
      logos
    } = this.state;
    const form = { 'Logo1': 'assets/logo.jpg', 'Logo2': 'assets/logo2.jpg', 'Logo3': 'assets/logo3.jpg' };

    return (
      <View style={styles.appContainer}>
        <View style={styles.titleContainer}>
          <Text style={styles.title}>Title</Text>
        </View>
        <ScrollView style={styles.timerlist}>
          {Object.values(form).map((key, val) => (
            <Avatar
              initials="KC"
              size={75}
              key={val}
              source={key}
              backgroundColor={'blue'}
              onPressLinkImage={() => {
                console.log('Pressed!');
              }}
            />
          ))}
        </ScrollView>
      </View>
    );
  }
}

还请注意，您的Object.values(form).map((key, val)将提供以下键和值

     key         | val
assets/logo.jpg  |  0
assets/logo1.jpg |  1
assets/logo2.jpg |  2

为了使您的代码易于阅读，我将代码更改为以下内容：

{Object.values(form).map((source, key) => (
    <Avatar
      initials="KC"
      size={75}
      key={key}
      source={source}
      backgroundColor={'blue'}
      onPressLinkImage={() => {
        console.log('Pressed!');
      }}
    />
  )
)}

我不知道为什么我总是看到“ ReferenceError：找不到变量：val”

1 个答案: