[英]React Native: Issue when rendering with map and index
我有一个多步骤表格,在顶部 header 我想展示一些面包屑,我试图让它在每个面包屑之间有一条线,但目前我只能在我的情况下为最后一种情况显示一条线(在这种情况下,在 3 到 4 之间,它应该看起来像:
1 - 2 - 3- 4
而目前我有:
1 2 3 - 4
看看我的图片就知道我在说什么:
我的代码如下:
const [ steps, setSteps ] = useState([ { title:'Detalles' }, { title:'Horario' }, { title:'Fotos' }, { title:'Menu' } ]);
<View style={{ width:'100%', backgroundColor:'white',flexDirection:'row', alignItems:'center', justifyContent:'space-around', position:'relative' }}>
{steps.map((step,index) => {return (
<>
<TouchableOpacity onPress={ ()=>{ onStepPressed(index+1) } } style={{ width:30,height:30,borderRadius:30/2, ...venueStore.currentStep == index+1 ? { backgroundColor:'rgb(3,91,150)' } : { backgroundColor:'rgb(150,150,150)' }, alignItems:'center',justifyContent:'center' }}>
<Text style={{ fontSize:14, color:'white' }}>{index+1}</Text>
</TouchableOpacity>
{ index == 0 || index == 1 || index == 2 && (<View style={{ width:45,height:2,backgroundColor:'rgb(68,68,68)' }}></View>)}
</>
)})}
</View>
知道如何实现我想要的结果
条件必须结合
{(index == 0 || index == 1 || index == 2) && (
<View
style={{ width: 45, height: 2, backgroundColor: "rgb(68,68,68)" }}
/>
)}
尝试反过来检查:
{
index !== steps.length - 1
&& <View style={{width:45,height:2,backgroundColor:'rgb(68,68,68)'}} />
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.