Question

我试图根据称为“关键字”的字符串组件来渲染其他图标。我还尝试根据布尔“活动”更改颜色。我相信我无法正确通过道具，因为我总是得到“默认”图标，并且“活动”始终设置为“真” ...

有什么想法吗？我已经尝试过json.stringify了，但是没有用。

这是渲染方法

Swift.Result<Any, Alamofire.AFError>.success({ errorCode = 1004; message = "You are not authorized to perform this action."; refId = 1ca40zco0itdd; }).

这里是组件

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>

    )
  }

Answer 1

将IconIndex参数更改为对象。

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

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

1 个答案: