Как я могу условно включить изображения в React Native Component?

Question

Я могу добавить статические изображения в ячейку ListView просто отлично (см. Код ниже), но как изменить динамическое изображение значка?

От React Native Docs

<Image source={require('./img/check.png')} /> 

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

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

В ListView создать cell объект, а затем передать его в ExpandingCell оказывать

массив источник данных ListView выглядит следующим образом:

var LIST_DATA = [ 
... 
    {type: 'ExpandingCell', 
    icon: './CellIcons/MagnifyingGlassIcon.png', //unused 
    title: 'Lorem Ipsum', 
    detail: 'Donec id elit non mi porta gravida at eget metus.'}, 
... 
]; 

затем в renderCell методе она будет передана выше Объект ячейки:

renderCell(cell) { 
    if (cell.type === 'ExpandingCell') { 
     return (
      <ExpandingCell cell={cell} /> 
     ); 
    } 
} 

Сейчас в ExpandingCell У меня есть это для render():

render() { 
    return (
     ... 
     <Image source{ 
      require('./CellIcons/MagnifyingGlassIcon.png') 
     }> 
     </Image> 
     ... 
    ); 
} 

Однако, когда я пытаюсь использовать this.props.cell.icon так:

<Image source={require(this.props.cell.icon)}></Image> 

Я получаю следующее сообщение об ошибке: Requiring unknown module "./CellIcons/MagnifyingGlassIcon.png".

Заранее спасибо =)

Answer 1

В изображения должны быть известны во время упаковки. В разделе docs есть раздел.

Поместите это в верхней части файла можно определить ExpandingCell в:

const MAGNIFYING_GLASS_ICON = require('./CellIcons/MagnifyingGlassIcon.png'); 

Затем вы можете использовать константу, как этот

let icon = someCondition ? MAGNIFYING_GLASS_ICON : SOME_OTHER_ICON; 
<Image source={icon}/> 

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