React Native中,现在代码是:
var noticeType = ”; switch (rowData.noticeType) { case "expired": noticeType = require(‘./img/clock_red.png’); break; case "normal": noticeType = require(‘./img/clock_green.png’); break; case "notEmergent": noticeType = require(‘./img/clock_gray.png’); break; default: noticeType = ”; } console.log("noticeType=" + noticeType); 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> <Image style={styles.noticeType} source={noticeType} /> <Text style={styles.updateTime}>{rowData.updateTime}</Text> </View> ); |
导致结果是:
当noticeType为空时,Image的source值就是空,是无效的,非法的,所以会报错:
现在希望实现:
根据条件判断,显示不同的视图,比如
当noticeType为空时,只是加载一个空的view,透明色,占位,即可;
当noticeType不为空时,就加载一个图片。
react native conditional render
然后去试试:
function NoticeTypeImage(props){ const noticeType = props.noticeType; switch (noticeType) { case "expired": return <Image style={styles.noticeType} source={require(‘./img/clock_red.png’)} />; case "normal": return <Image style={styles.noticeType} source={require(‘./img/clock_green.png’)} />; case "notEmergent": return <Image style={styles.noticeType} source={require(‘./img/clock_gray.png’)} />; case "": return <View style={{paddingLeft: 10, width:20, height:20, backgroundColor:’red’}}></View>; //return <Image style={{paddingLeft: 10, width:20, height:20, backgroundColor:’transparent’}}></Image>; } } 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> <NoticeTypeImage noticeType={rowData.noticeType}/> <Text style={styles.updateTime}>{rowData.updateTime}</Text> </View> ); } |
真的可以了:
【总结】
此处,想要实现,根据输入的值不同,条件判断后,再决定显示什么
思路是:把要显示返回的内容,封装成一个函数,然后传入参数,函数中,根据参数,用if else或switch case就可以返回所需要显示的内容了。
比如:
function NoticeTypeImage(props){ const noticeType = props.noticeType; switch (noticeType) { case "expired": return <Image style={styles.noticeType} source={require(‘./img/clock_red.png’)} />; case "normal": return <Image style={styles.noticeType} source={require(‘./img/clock_green.png’)} />; case "notEmergent": return <Image style={styles.noticeType} source={require(‘./img/clock_gray.png’)} />; case "": return <View style={{paddingLeft: 10, width:20, height:20, backgroundColor:’transparent’}}></View>; } } |
调用的地方:
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> <NoticeTypeImage noticeType={rowData.noticeType}/> <Text style={styles.updateTime}>{rowData.updateTime}</Text> </View> ); } |
转载请注明:在路上 » 【已解决】ReactNative中如何实现条件判断显示不同视图