[英]How to do conditional rendering using switch in react native?
Hello I'm trying to do switch statement in my project.I've an object image as follows 您好我正在尝试在项目中执行switch语句。我有一个对象图像如下
export const images = [
{
image: BASE.URL + 'Images/Plumber.png',
},
{
image: BASE.URL + 'Images/electrician.png',
},
{
image: BASE.URL + 'Images/ac.png',
}
]
I'm fetching the list of workers from server and render it within a Card
.So the server response only contains the name of workers.I'm trying to give images along with them.So I've written a switch statement but image is not coming along with the text.Following is my code. 我从服务器获取工作人员列表并将其呈现在
Card
因此服务器响应中仅包含工作人员的名称。我试图将图像与它们一起提供,因此我编写了switch语句,但是图像是不随文本一起出现。以下是我的代码。
import { images } from './data';
renderImage() {
const { workType } = this.state;
switch (workType) {
case 'Plumber':
return (
<Image style={{ height: 100, width: 100 }} source={{ uri: images[0].image }} />
);
case 'Electrician':
return (
<Image style={{ height: 100, width: 100 }} source={{ uri: images[1].image }} />
);
case 'AC'
return (
<Image style={{ height: 100, width: 100 }} source={{ uri: images[2].image }} />
);
}
}
render(){
const { workers,workType } = this.state;
return(
{workers.map((a, index) => (
<TouchableOpacity onPress={() => this.popUpDialog(a.id, a.work_type)}>
<Card>
{this.renderImage()}
<Text>{a.work_type}</Text>
</Card>
</TouchableOpacity>
))}
)
}
What wrong I'm doing please help me to find a solution.Thank you! 我做错了什么,请帮助我找到解决方案。谢谢!
I think you forgot to return the mapped component. 我认为您忘记了返回映射的组件。
eg: 例如:
render() {
const { workers,workType } = this.state;
return(
{workers.map((a, index) => {
return(
<TouchableOpacity onPress={() => this.popUpDialog(a.id, a.work_type)}>
<Card>
{this.renderImage()}
<Text>{a.work_type}</Text>
</Card>
</TouchableOpacity>
)
})}
)
}
Try to console.log
your this.state.workType
because it might not be the value you think it should be. 尝试
console.log
您的this.state.workType
因为它可能不是您认为应该的值。 Since you dont have a default
case, the function returns nothing. 由于您没有
default
大小写,因此该函数不返回任何内容。
Also, it could be easier if you take the workType
as a parameter for your renderImage
function. 另外,如果将
workType
用作renderImage
函数的参数,则可能会更容易。 I suspect your this.state.workType
will not be the same with your a.work_type
in the workers.map
function. 我怀疑你的
this.state.workType
不会与你同a.work_type
在workers.map
功能。 You can do it like this 你可以这样
const renderImage = (workType) => {
switch (workType) {
...
}
}
//and then
workers.map((a, index) => (
<TouchableOpacity onPress={() => this.popUpDialog(a.id, a.work_type)}>
<Card>
{this.renderImage(a.work_type)}
<Text>{a.work_type}</Text>
</Card>
</TouchableOpacity>
))
My advice would be to go for a map and render the image in following way. 我的建议是去一张地图,然后按照以下方式渲染图像。
const WORKTYPE_TO_IMAGE = {
Plumber: BASE.URL + 'Images/Plumber.png',
Electrician: BASE.URL + 'Images/electrician.png',
AC: BASE.URL + 'Images/ac.png',
};
renderImage(){
return (
<Image style={{ height: 100, width: 100 }} source={WORKTYPE_TO_IMAGE[this.state.workType]} />
)
}
You were using Image tag thrice but now you'll only use it once (hence Do Not Repeat principle is followed). 您曾经使用Image标签三次,但是现在只使用一次(因此遵循“不重复”原理)。 Furthermore, I really hate if/switch in my code because the requirements frequently, instead changing logic in your code, you should change only at one place (which is a constant in your case).
此外,我真的很讨厌在代码中使用if / switch,因为需求经常出现,而不是更改代码中的逻辑,您应该只在一个位置进行更改(在您的情况下这是一个常数)。 The code will be really clean and short :)
该代码将非常干净和简短:)
I just give style to main view and then everything is working fine. 我只是将样式赋予主视图,然后一切正常。
renderImage(workType) {
switch (workType) {
case 0:
return (
<Image style={{ height: 100, width: 100, backgroundColor: 'green' }} />
);
case 1:
return (
<Image style={{ height: 100, width: 100, backgroundColor: 'yellow' }} />
);
case 2:
return (
<Image style={{ height: 100, width: 100, backgroundColor: 'blue' }} />
);
}
}
//source={{ uri: require('./1.jpg') }}
render() {
let workers = [{ work_type: 'Plumber' }, { work_type: 'Electrician' }, { work_type: 'AC' }];
return (
<View style={{ width: '100%', height: '100%', backgroundColor: 'red' }}>
{
workers.map((a, index) => (
<TouchableOpacity onPress={() => this.popUpDialog(a.id, a.work_type)}>
<View>
{this.renderImage(index)}
<Text>{a.work_type}</Text>
</View>
</TouchableOpacity>
))
}
</View>
)
}
I have set color as I don't have an image. 我没有图像,所以设置了颜色。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.