在 React Native 中有条件地渲染图标

Question

我正在尝试根据名为“关键字”的字符串组件呈现不同的图标。我还尝试根据布尔“活动”来更改颜色。我相信我没有正确传递道具，因为我总是得到“默认”图标并且“活动”总是设置为“真”...

有什么想法吗？我试过 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>

    )
  }

这里是组件

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

Answer 1

将 IconIndex 参数更改为对象。

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