Javascript 反应本机：使用贴图和索引渲染时出现问题

我有一个多步骤表单，在顶部标题中，我想显示一些类型的面包圈，我试图使每个面包圈之间有一条线，但目前我只能显示我的情况下最后一个案例的一条线（在本例中，在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>

const[steps，setSteps]=useState（[{title:'Detalles'}，{title:'Horario'}，{title:'Fotos'}，{title:'Menu'}]）；
{steps.map（（step，index）=>{return(
{onStepPressed（index+1）}style={{{width:30，height:30，borderRadius:30/2，{venueStore.currentStep==index+1？{backgroundColor:'rgb（3,91150）}:{backgroundColor:'rgb（150150150）}，alignItems:'center'，justifyContent:'center'}>
{index+1}
{index==0 | | index==1 | | index==2&&（）}
)})}

---

你知道我如何才能达到我想要的结果吗

试试另一种方法：

{
  index !== steps.length - 1 
  && <View style={{width:45,height:2,backgroundColor:'rgb(68,68,68)'}} />
}

{
索引！==steps.length-1
&& 
}

必须组合该条件

{（索引==0 | |索引==1 | |索引==2）&&(
)}