Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
54 views
in Technique[技术] by (71.8m points)

javascript - React Native: Issue when rendering with map and index

I have a multi-step form and in the top header I want to show some kind if breadcumbs, I'm trying to make it so between each breadcumb there's a line but currently I can only show a line for the last case in my condition (in this case, between 3 and 4, when it should look something like:

1 - 2 - 3- 4

while currently I have:

1 2 3 - 4

Have a look at my image to know what I'm talking about:

enter image description here

My code is as follows:

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>

Any idea how I can achieve my desired result

question from:https://stackoverflow.com/questions/65891589/react-native-issue-when-rendering-with-map-and-index

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

The condition must be combined

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...