Question

我是本机的新手，我试图获得一个由徽标组成的菜单，有人可以向下滚动然后点按其中的一个按钮来获得更多详细信息。

所以我的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',
  },
});

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

Answer 1

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

 const image = getImageforRestaurant(source)

 <Image source={image} />

当您想从互联网上加载图像时，请按照以下步骤进行操作。

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

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

Answer 2

虽然爱迪生（Edison）很好地阐述了良好做法，但我相信您的问题是您只需要两次图像。 require（）的输出就是您需要传递给Image组件的输出。您正在执行需求的需求。

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

可能只需对此进行更改即可

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

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

2 个答案: