Условный рендеринг значка в React Native - PullRequest
Новая
       26

Условный рендеринг значка в React Native

0 голосов
/ 04 августа 2020

Я пытаюсь отобразить другой значок в зависимости от строкового компонента, называемого ключевым словом. Я также пытаюсь изменить цвет в зависимости от логического «активный». Я считаю, что я не передаю реквизиты должным образом, так как я всегда получаю значок «по умолчанию», а для параметра «active» всегда установлено значение «true» ...

Есть идеи? Я пробовал json .stringify, но это не сработало.

Вот метод рендеринга 

renderFilter(type){

    const activeType = (key) => type === key;

    return(
      <View style={styles.section}>
      <View>
        <Text style={styles.title}>Sort By</Text>
      </View>
      <View style={styles.gallery}>
      {Types.map(onetype => (
        <TouchableOpacity
          key={onetype}
          style={[styles.button, activeType(onetype) ? styles.active : null]}
          onPress={() => this.props.setFilters({ type: onetype })}>
          <IconIndex keyword={JSON.stringify(onetype)} active={activeType(onetype)}/>
          <Text style={[styles.buttonText, activeType(onetype) ? styles.activeText : null]}>{`${onetype}`}</Text>
        </TouchableOpacity>
      ))}
      </View>
      </View>

    )
  }

, а здесь Component 

import React from 'react'
import Ionicons, {FontAwesome, Foundation, SimpleLineIcons} from 'react-native-vector-icons/Ionicons'
//https://ionicons.com/v4/cheatsheet.html
//https://fontawesome.com/icons?d=gallery&m=free

const IconIndex = (keyword, active) => {


    switch (keyword) {
        case 'Supplies':
            return(
            <Ionicons name="md-cart" size={24} color={active ? '#FFF' : '#D3D3D3'}/>)
          break;
    
        case 'Fashion':
            return(
            <Foundation name='tshirt' size={24} color={active ? '#FFF' : '#D3D3D3'}/>)
          break;
    
        case 'Furniture':
            return(
            <Ionicons name="ios-house" size={24} color={active ? '#FFF' : '#D3D3D3'}/>)
          break;

        case 'Ice-cream':
            return(
            <Ionicons name="ios-ice-cream" size={24} color={active ? '#FFF' : '#D3D3D3'}/>)
        break;

        case 'Restaurant':
            return(
            <Foundation name='utensils' size={24} color={active ? '#FFF' : '#D3D3D3'}/>)
        break;

        case 'Pharmacy':
            return(
            <Foundation name='first-aid' size={24} color={active ? '#FFF' : '#D3D3D3'}/>)
        break;
        
        case 'Bookstore':
            return(
            <Ionicons name="ios-book" size={24} color={active ? '#FFF' : '#D3D3D3'}/>)
            break;

        case 'Technology':
            return(
            <Ionicons name="plug" size={24} color={active ? '#FFF' : '#D3D3D3'}/>)
            break;
    
        case 'All':
            return(
            <Ionicons name="ios-star" size={24} color={active ? '#FFF' : '#D3D3D3'}/>)
            break;  
    
        default:
            return(
            <Ionicons name="ios-star" size={24} color={active ? '#FFF' : '#D3D3D3'}/>)
          break;
      }
    }
 

export default IconIndex

1 Ответ

0 голосов
/ 04 августа 2020

изменить параметры IconIndex как объект. 

const IconIndex = ({keyword, active}) => {
    let Icon;
    switch(keyword){
        case 'Example':
            Icon = <YourIconComponent />
            break;
        ...
        default:
            Icon = <AnotherIconComponent />
            break;
    }
    return Icon;
...
}
...