Вызовы `require` ожидают ровно 1 аргумент строкового литерала, но было найдено следующее:

У меня есть компонент в приложении с SectionList, который анализирует его содержимое из локального файла json. В элементе списка есть изображение и текст, и когда требуется изображение с использованием varibale, возникает ошибка: calls to require expect exactly 1 string literal argument, but this was found: item.logo.

Мой файл json

{
    "algorithms":[
       {"title":"Sorting algorithms","logo":"../logos/sorting.png"},
       {"title":"Graph theory","logo":"../logos/graph.png"},
       {"title":"Strings","logo":"../logos/strings.png"},
       {"title":"Greedy technique","logo":"../logos/greedy.png"},
       {"title":"Dynamic programming","logo":"../logos/dp.png"}
    ],
    "datastructures":[
       {"title":"Trees","logo":"../logos/tree.png"},
       {"title":"Lists","logo":"../logos/list.png"},
       {"title":"Tries","logo":"../logos/trie.png"},
       {"title":"Stack and Queue","logo":"../logos/stack.png"},
       {"title":"Hash Tables","logo":"../logos/hashtable.png"}
     ] 
}

И функция renderItem

renderItem = ({item}) => {
    return(
        <TouchableWithoutFeedback onPress = {()=>this.props.navigation.navigate('List')}>
            <View style = {styles.itemHolder}>
                <Image resizeMode = "center" style = {styles.itemLogo} source = {require(item.logo)}/>
                <View style = {styles.itemNameHolder}>
                    <Text style = {styles.itemName}>{item.title}</Text>
                </View>
                <View style = {styles.itemPointer}>
                    <Image style = {{width:50,height:50,}} source = {require('../icons/right-arrow.png')}/>
                </View>
                <Divider/>
            </View>
        </TouchableWithoutFeedback> 
    );
}

Отредактировано

Функция require в js не работает динамически. Аргумент должен быть строкой.

image react-native react-native-sectionlist

30.07.2018 08:17

Применение градиента к изображению с помощью CSS

Здравствуйте, братья и сестры, как дела? Недавно я застрял на применении градиента к изображению. Я применял это много раз, но иногда наши требования...

Получение URL-адреса изображения курса в Moodle с помощью PHP

Moodle - это популярная система управления обучением с открытым исходным кодом, используемая многими учебными заведениями и организациями по всему...

849

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Редактировать: Я думаю, вам нужно использовать обходной путь карты

во-первых, вам нужно найти способ сделать формат логотипа таким

const data = [
   {"title":"Sorting algorithms","logo": require('../logos/sorting.png')},
   {"title":"Graph theory","logo": require('../logos/graph.png')},
]

Затем, когда вы захотите его использовать, просто сделайте вот так

render() {
  return (
    <View>
      {data.map((item) => {
        <View>
          <Image
           style = {styles.image}
           source = {item.logo}
          />
        </View>
      })}
    </View>
  );
}

дайте мне знать, работает это или нет

Я думаю, что в React Native есть известная ошибка, связанная с динамическим отображением изображения с помощью FlatList или SectionList. Постараюсь подредактировать ответ.

— 30.07.2018 14:21

30.07.2018 11:46