React Native：使用 map 和索引渲染時出現問題

Question

我有一個多步驟表格，在頂部 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>

知道如何實現我想要的結果

Answer 1

條件必須結合

  {(index == 0 || index == 1 || index == 2) && (
     <View
       style={{ width: 45, height: 2, backgroundColor: "rgb(68,68,68)" }}
     />
  )}

Answer 2

嘗試反過來檢查：

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