Реагировать на исходный компонент компонента Image как импортные изображения ES6

Question

Можно ли импортировать изображения и использовать их в source компонента <Image />?

У меня есть много мест, где мне нужно условно отобразить значок или другой символ в зависимости от состояния , Например:

{isToggled ? (
  <Image
    resizeMode='contain'        
    source={require('../../assets/images/icon_chevron_up_B82BF9.png')}
    style={styles.toggleArrowImage}
  />
) : (
  <Image
    resizeMode='contain'
    source={require('../../assets/images/icon_chevron_down_B82BF9.png')}
    style={styles.toggleArrowImagew}
  />
)}

Или

const getToogleImageSource = () => {
  if (isToggled) {
    return require('../../assets/images/icon_chevron_up_B82BF9.png')
  }

  return require('../../assets/images/icon_chevron_down_B82BF9.png')
}

...
<Image
  resizeMode='contain'
  source={getToogleImageSource()}
  style={styles.toggleArrowImagew} 
/>

Глядя на Реагируйте на собственную документацию по Image и ищите ее в StackOverflow, я всегда вижу решения, использующие require чтобы получить исходный код.

Отсюда мой вопрос об использовании импорта ES6 следующим образом, чтобы уменьшить количество строк кода (мне также легче читать):

import chevronDown from ('../../assets/images/icon_chevron_down_B82BF9.png')
import chevronUp from ('../../assets/images/icon_chevron_up_B82BF9.png')

...

<Image
  resizeMode='contain'
  source={isToggled ? chevronUp : chevronDown}
  style={styles.toggleArrowImagew} 
/>

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

К вашему сведению, у меня это в приложении. json:

"assetBundlePatterns": [
  "assets/images/*"
],

Спасибо за помощь.

[РЕДАКТИРОВАТЬ]: Я забыл упомянуть, что я использую Expo

Answer 1

Я использую следующий метод при использовании изображений в приложенииact-native. Хотя при этом используется ключевое слово required, я также получаю следующие преимущества:

• меньшее количество строк кода и возможность избежать повторения ключевого слова required для того же изображения в во многих местах.
• Поскольку это единственная точка импорта, изображение во всем приложении можно изменить с помощью одной строки кода.
• очень высокая читаемость

---

Вот реализация с 3 простыми шагами.

1. В вашем каталоге assets определите индексный файл (index.tx). если вы используете js index.js

2. , выполните все операции импорта в индексном файле

   const images = {
       logo: require('./logo.png'),
       splash_image: require('./splash_image.png'),
       chevronUp: require('./chevronUp.png'),
       chevronUp: require('./chevronDown.png'),
   }
   
   export default images;
   

3. , импортируйте index.tx в свой компонент и использовать следующим образом. Вы можете использовать любые изображения, используя image.filename. а также не более require ключевое слово в ваших компонентах.

   import images from '../../../assets';
   ...
   
   <Image
     resizeMode='contain'
     source={isToggled ? images.chevronUp : images.chevronDown}
     style={styles.toggleArrowImagew} 
   />
   

надеюсь, это то, что вы ищете: D

---

---

ОБНОВЛЕНИЕ после попытки с import

просто импортируйте изображение сверху для компонента.

import { ... , Image } from 'react-native';
import img_welcome from '../../images/welcome.png';

...

<Image source={img_welcome} />

, это прекрасно работает для меня.

Я не в приложении ничего нет. json кроме имен приложений

Единственное отличие, которое я вижу из вашего кода и моего рабочего кода, заключается в наличии пары круглых скобок () в выражении import

Ура!