最新消息:VPS服务器又从fzhost.net换回Linode了,主题仍用朋友推荐的大前端D8

【已解决】ReactNative中如何实现switch case条件判断语句

React Native crifan 319浏览 0评论

之前通过: 【已解决】ReactNative中加载图片失败:Unknown named module 和: 【已解决】ReactNative中如何实现(xxx)=>yyy中yyy中添加js代码

发现了:
Image中的require中,必须是静态字符串

-》静态路径-》RN在编译期间,就可以去查找对应的图片了
所以此处,无法通过之前的:

var levelIconName = './img/customerLevel_' + rowData.intentionLevel + '.png';
var levelIcon = require(levelIconName);

只能写成静态的:

var levelIconName = './img/customerLevel_B.png';

但是很明显,就没法根据传入的参数值,动态加载对应的图标了

所以需要去用swicth case去根据传入的参数,生成对应的静态字符串

-》即图片的路径地址

react native switch case

javascript – Switch Case Doesn’t work in React Native – Stack Overflow

reactjs – Using for loops and switch cases in React to dynamically render different components – Stack Overflow

react native js switch case

react switch case

不过,抽空再去采用:

Killing Switch Statements in React with the Strategy Pattern

提到的方法:

暂时没有完全理解

functional problem
imperative style

结果在: 

【已解决】ReactNative iOS运行再次出错:No bundle URL present

之后,代码:

< View style = {
  styles.customerList
} >

<ListView dataSource = {
  this.state.dataSource
}
renderRow = { (rowData) = >{
    //var levelIconName = ‘./img/customerLevel_’ + rowData.intentionLevel + ‘.png’;
    //var levelIconName = ‘./img/customerLevel_B.png’;
    //var levelIcon = require(‘./img/customerLevel_B.png’);
    var levelIcon = function() {
      switch (rowData.intentionLevel) {
      case“A”:
        return require(‘. / img / customerLevel_A.png’);
      case“B”:
        return require(‘. / img / customerLevel_A.png’);
      case“C”:
        return require(‘. / img / customerLevel_A.png’);
      case“H”:
        return require(‘. / img / customerLevel_A.png’);
      }
    };
    console.log(levelIcon);
    return ( < View style = {
      styles.customerRow
    } > <Image style = {
      styles.intentionLevel
    }
    source = {
      levelIcon
    }
    />
<Text style={styles.customerName}>{rowData.customerName}</Text > <Text style = {
      styles.intentionCar
    } > {
      rowData.intentionCar
    } < /Text>
<Text style={styles.updateTime}>{rowData.updateTime}</Text > </View>
);
}
}
/> </View>

出错:

 

点击后,显示更多细节: 

javascript switch case

Switch statement multiple cases in JavaScript – Stack Overflow

JavaScript Switch 语句

JavaScript Switch Case

最后,就是用普通的js的switch case,就可以了:

renderRow = { (rowData) = >{
    //var levelIconName = './img/customerLevel_' + rowData.intentionLevel + '.png';
    //var levelIconName = './img/customerLevel_B.png';
    //var levelIcon = require('./img/customerLevel_B.png');
    var levelIcon = "";
    switch (rowData.intentionLevel) {
    case "H":
      levelIcon = require('./img/customerLevel_H.png');
      break;
    case "A":
      levelIcon = require('./img/customerLevel_A.png');
      break;
    case "B":
      levelIcon = require('./img/customerLevel_B.png');
      break;
    case "C":
      levelIcon = require('./img/customerLevel_C.png');
      break;
    default:
      levelIcon = require('./img/customerLevel_C.png');
    }

    console.log(levelIcon);

    return ( < View style = {
      styles.customerRow
    } > <Image style = {
      styles.intentionLevel
    }
    source = {
      levelIcon
    }
    />
<Text style={styles.customerName}>{rowData.customerName}</Text > <Text style = {
      styles.intentionCar
    } > {
      rowData.intentionCar
    } < /Text>
<Text style={styles.updateTime}>{rowData.updateTime}</Text > </View>
);
}
}

【总结】

此处,ReactNative 中实现switch case,就是普通的js中的switch case:

var levelIcon = "";
switch (rowData.intentionLevel) {
case "H":
  levelIcon = require('./img/customerLevel_H.png');
  break;
case "A":
  levelIcon = require('./img/customerLevel_A.png');
  break;
case "B":
  levelIcon = require('./img/customerLevel_B.png');
  break;
case "C":
  levelIcon = require('./img/customerLevel_C.png');
  break;
default:
  levelIcon = require('./img/customerLevel_C.png');
}

console.log(levelIcon);

即可。

【注】

后来经过推荐,又发现一个好的教程,详见: 

How to use Conditional Statements in JavaScript

转载请注明:在路上 » 【已解决】ReactNative中如何实现switch case条件判断语句

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
15 queries in 0.232 seconds, using 10.00MB memory