繁体   English   中英

React Native:使用 map 和索引渲染时出现问题

React Native: Issue when rendering with map and index

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我有一个多步骤表格,在顶部 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>

知道如何实现我想要的结果

2 个回复

条件必须结合

  {(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)'}} />
}
2 使用LibGDX渲染地图位置时出现问题

我一直在YouTube上关注LibGDX教程,并遇到了在屏幕上渲染TiledMap的问题。 目前,我可以使用HUD Java类渲染一些标签/图像 } 这些在屏幕上很好地呈现。 但是,当我尝试渲染背景TMX地图图像时,它在错误的位置渲染。 几天来我一直在弄乱代码,试图更改地图位 ...

3 Haskell:在抽象数据类型上使用地图时出现问题

直截了当地,类型声明如下: 试图做的是获取一个Image ,并从该图像中获取位置Pnt具有宽度和长度Dims的特定像素块。 当只用一点来工作时,没有任何问题或任何问题; 但是,当试图获得多个要点时,我发现自己陷入了我认为是正确的实现方式的问题,但是编译器似乎与我不同意 ...

4 React-native:渲染从 api 获取的平面列表中每个组件的信息时出现问题

我正在用 react-native 开发一个应用程序,但我仍然是一个初学者,所以我认为我做错了什么。 该应用程序的逻辑如下: 首先,我从 API 中获取餐馆列表 对于每家餐厅,我都会在平面列表中显示一张包含所有相关信息的“卡片” 对于每家餐厅,我需要从第二个 API(其 url 取决于 ...

6 使用React在Bootstrap表上渲染API时出现问题

我对React很陌生,我正在尝试呈现一个API,但是它正在每个端点创建一个新的Table,我认为这个问题是因为我正在映射但我不知道还要做什么。 先谢谢您的帮助。 我应该为表格创建一个新组件吗 ...

7 链接react-native-vector-icons时出现问题

我刚刚从零开始一个新的react-native项目,添加了react-native-vector-icons,但是当我尝试链接它时,我得到了以下信息,我不知道为什么会这样,我没有做任何更改,这是一个不错的项目。 由于出现此错误,我所有的图标都在正方形内显示为X * PROJECTF ...

9 使用地图查找时出现问题-不可取消映射/设置迭代器

我上面的代码有问题,并设法将其范围缩小到我创建的迭代器。 确切的错误是无济于事的,因为它会破坏到xtree:273而不是我的实际代码,但是它确实给出了错误“ map / set迭代器不可取消”。 我不确定为什么会这样,我可能正在做一些明显错误的事情,任何帮助都会很棒。 哦,起初这 ...

10 使用php json和react-native获取数据时出现问题

我目前正在react-native中开发一个简单的登录功能,该功能使用php和json从mysql获取数据。 我面临的问题是,我一遍又一遍地收到“ JSON解析错误:意外的EOF”,我不知道该怎么办。 我认为问题一定出在react-native组件中,因为我已经在Postman上测试了P ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM