我正在尝试将所有图像加载为可滚动菜单，但不知道如何答案

【问题标题】：I'm trying to load all the images as a scrollable menu but can't figure out how我正在尝试将所有图像加载为可滚动菜单，但不知道如何
【发布时间】：2019-08-08 07:47:53
【问题描述】：

我是本地反应新手，我正在尝试获得一个由徽标组成的菜单，有人可以向下滚动然后点击一个以了解更多详细信息。

所以我有我的App.js 文件，如下所示：

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

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

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

    this.state = {
      restaurants: 'buffalo',
    };
  }

  render() {
    const {
      restaurants
    } = this.state;

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

const styles = StyleSheet.create({
  appContainer: {
    flex: 1,
    justifyContent: 'center',
  },
  titleContainer: {
    paddingTop: 35,
    paddingBottom: 15,
    borderBottomWidth: 1,
    borderBottomColor: '#D6D7DA',
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  timerList: {
    paddingBottom: 15,
  },
  container: {
    flex: 1,
    backgroundColor: '#34495E',
  },
  imageContainer: {
    flex: 0,
  },
  image: {
    flex: 1,
    width: 75,
    height: 75,
    resizeMode: 'contain',
  },
});

如果我将getImageForRestaurant() 方法设置在<Image/> 中，则它可以按预期工作，但如果我尝试将其设置为我的“头像”组件的source，那么它将无法正常工作。

我的getImageForRestaurant.js 文件是这样的：

const images = {
  buffalo1: require('../assets/restaurants/logo1.jpeg'),
  buffalo: require('../assets/restaurants/logo2.png'),
  buffalo2: require('../assets/restaurants/logo3.jpeg'),
};

export default restaurants => images[restaurants];

最后我的Avatar.js如下：

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

import getImageForRestaurant from '../utils/getImageForRestaurant';

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

  return (
    <View style={[styles.container, style]}>
      <TouchableOpacity onPress={onPressLinkImage}>
        <Text style={styles.text}>{initials}</Text>
        <Image source={require(getImageForRestaurant(source))} />
        {/*<Image source={require("../assets/restaurants/logo1.jpeg")} />*/}
      </TouchableOpacity>
    </View>
  );
}

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

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    color: 'white',
  },
});

因此，如果我只是做一个图像源，（注释部分）它可以作为常规图像工作，但是我需要对实际的 url 进行硬编码，我想要的只是将所有图像一个挨一个地加载在可滚动的网格中。一直无法弄清楚如何做我想做的事。有人可以指出我正确的方向吗？

【问题讨论】：

你把require(require(...))图像源加倍。只需到 `

标签： react-native jsx

【解决方案1】：

虽然 Edison 对良好做法提出了很好的意见，但我相信您的问题是您只需要两次图像。 require() 的输出是您需要传递给 Image 组件的内容。你正在做一个要求。

<Image source={require(getImageForRestaurant(source))} />

可能只是改成这样就可以了：

<Image source={getImageForRestaurant(source)} />

【讨论】：

【解决方案2】：

在 source prop 中生成 url 是一种不好的做法。始终确保在传入源属性之前构建必要的 URL。您可以使用变量来构建您的 URL，然后将其传递给 source prop。（在您的情况下，图像是在辅助函数中导入的，因此我将使用图像变量）

 const image = getImageforRestaurant(source)

 <Image source={image} />

当您想从 Internet 加载图像时，请这样做。

const link = ‘http://example.com/image.png’

<Image source={{uri: link}} />

【讨论】：