Я пытаюсь загрузить все изображения в виде прокручиваемого меню, но не могу понять, как

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

Так что еслиЯ просто делаю источник Image (закомментированную часть), он работает как обычное изображение, но затем мне нужно жестко закодировать фактический URL-адрес, и я хочу просто загрузить все изображения одно рядом с другим в прокручиваемой сетке.Не удалось понять, как делать то, что я хочу.Может ли кто-нибудь указать мне правильное направление?

Answer 1

Несмотря на то, что Эдисон делает хорошие выводы о передовой практике, я считаю, что ваша проблема в том, что вам просто требуется изображение дважды.Вывод функции require () - это то, что вам нужно передать компоненту Image.Вы делаете требовать или требовать.

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

Вероятно, только изменение на это должно работать:

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

Answer 2

Это плохая практика - генерировать url внутри исходной подпорки. Всегда проверяйте, чтобы необходимый URL был создан до того, как он будет передан в исходный текст. Вы можете использовать переменную для создания вашего URL, а затем передать его в исходный текст. (В вашем случае изображение импортируется внутри вспомогательной функции, и поэтому я буду использовать переменную изображения)

 const image = getImageforRestaurant(source)

 <Image source={image} />

Если вы хотите загрузить изображения из Интернета, сделайте это следующим образом.

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

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