Как правильно условно требовать ресурсы изображений с помощью React Native и TypeScript? (получение ошибок eslint)

Использование React Native 0.63 и Typescript 4.

У меня есть приложение с категориями. В каждой категории есть изображение, которое хранится как актив с кодом.

Я пробовал это:

myImage = require(`${myImageName}.jpg`)

Но eslint мне говорит:

Вызовы require () должны использовать строковые литералы (eslintimport / no-dynamic-require)

Вместо этого я сделал следующее:

В images / index.ts:

import vibrators = require('./vibrators.jpg'),
import dildos = require('./dildos.jpg'),
import clitoris = require('./clitoris.jpg'),
import plugs = require('./plugs.jpg'),
import rings = require('./rings.jpg'),
import kits = require('./kits.jpg'),
import men = require('./men.jpg'),
import women = require('./men.jpg'),
import couple = require('./couple.jpg'),
import bondage = require('./bondage.jpg'),
import furniture = require('./funiture.jpg'),
import lingerie = require('./lingerie.jpg'),
import games = require('./games.jpg'),

const categories = {vibrators, dildos, plugs, rings, kits, men, women, couple, bondage, furniture, lingerie, games}

export { categories, ... }

(Извините, я устал менять все имена каждый раз, когда что-то публикую об этом приложении ... ^ - ^ ')

В моем компоненте, который печатает изображения категорий:

import React, { FC } from 'react'
import { TouchableOpacity, Image } from 'react-native'
import { useNavigation } from '@react-navigation/native'
import { categories } from '../assets/images'

interface Props {
  category: string
}

const CategoryImage: FC<Props> = ({ category }) => {
  const navigation = useNavigation()

  return (
    <TouchableOpacity style={styles.container} onPress={() => navigation.navigate(category)}>
      <Image source={categories[category]} style={styles.image} />
    </TouchableOpacity>
  )
}

export default CategoryImage

Но опять же:

import vibrators = require('./vibrators.jpg'),

У меня есть:

Оператор Require не является частью оператора импорта. (eslint @ typescript-eslint / no-var-requires)


person Morgane    schedule 20.11.2020    source источник
comment
Помогает ли вам этот ответ?   -  person Shubham Verma    schedule 20.11.2020
comment
Спасибо. На самом деле я не могу осознать этот оператор Require, не являющийся частью оператора импорта, но это всего лишь ошибка eslint и вообще хорошо работает ...   -  person Morgane    schedule 22.11.2020