如何在 React Native 中使用 switch 进行条件渲染?
How to do conditional rendering using switch in react native?
你好,我正在尝试在我的 project.I 对象图像中执行 switch 语句,如下所示
export const images = [
{
image: BASE.URL + 'Images/Plumber.png',
},
{
image: BASE.URL + 'Images/electrician.png',
},
{
image: BASE.URL + 'Images/ac.png',
}
]
我正在从服务器获取工作人员列表并将其呈现在 Card
中。因此服务器响应仅包含 workers.I 的名称,我正在尝试提供图像以及 them.So 我已经写了一个 switch 语句,但是图像没有随 text.Following 一起出现是我的代码。
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>
))}
)
}
我做错了什么请帮我找一个solution.Thank你!
我的建议是使用地图并按以下方式渲染图像。
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]} />
)
}
您曾三次使用图片标签,但现在您将只使用一次(因此遵循“不重复”原则)。此外,我真的很讨厌我的代码中的 if/switch 因为需求频繁,而不是改变代码中的逻辑,你应该只改变一个地方(这在你的情况下是一个常量)。代码将非常干净和简短:)
我想你忘记了 return 映射组件。
例如:
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>
)
})}
)
}
我只是给主视图添加样式,然后一切正常。
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>
)
}
我已经设置了颜色,因为我没有图像。
尝试 console.log
您的 this.state.workType
因为它可能不是您认为应该的值。由于您没有 default
案例,因此函数 returns 没有。
此外,如果您将 workType
作为 renderImage
函数的参数,可能会更容易。我怀疑您的 this.state.workType
与 workers.map
函数中的 a.work_type
不同。你可以这样做
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>
))
你好,我正在尝试在我的 project.I 对象图像中执行 switch 语句,如下所示
export const images = [
{
image: BASE.URL + 'Images/Plumber.png',
},
{
image: BASE.URL + 'Images/electrician.png',
},
{
image: BASE.URL + 'Images/ac.png',
}
]
我正在从服务器获取工作人员列表并将其呈现在 Card
中。因此服务器响应仅包含 workers.I 的名称,我正在尝试提供图像以及 them.So 我已经写了一个 switch 语句,但是图像没有随 text.Following 一起出现是我的代码。
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>
))}
)
}
我做错了什么请帮我找一个solution.Thank你!
我的建议是使用地图并按以下方式渲染图像。
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]} />
)
}
您曾三次使用图片标签,但现在您将只使用一次(因此遵循“不重复”原则)。此外,我真的很讨厌我的代码中的 if/switch 因为需求频繁,而不是改变代码中的逻辑,你应该只改变一个地方(这在你的情况下是一个常量)。代码将非常干净和简短:)
我想你忘记了 return 映射组件。
例如:
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>
)
})}
)
}
我只是给主视图添加样式,然后一切正常。
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>
)
}
我已经设置了颜色,因为我没有图像。
尝试 console.log
您的 this.state.workType
因为它可能不是您认为应该的值。由于您没有 default
案例,因此函数 returns 没有。
此外,如果您将 workType
作为 renderImage
函数的参数,可能会更容易。我怀疑您的 this.state.workType
与 workers.map
函数中的 a.work_type
不同。你可以这样做
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>
))