在 React Native 中将线放在图标下方答案

【问题标题】：Put Line Below Icons In React Native在 React Native 中将线放在图标下方
【发布时间】：2019-11-07 07:05:17
【问题描述】：

这里有两个图标和一个虚线。目前，线条位于图标之上。怎么把icon放在前面，把线放在icon后面？

<View style={styles.iconCompleted}>
      <Dash dashColor={'#57B9BB'} style={styles.dash}/>
      <Ionicons name='ios-checkmark-circle' size={32} color={'#57B9BB'}/>
      <Ionicons name='ios-checkmark-circle' size={32} color={'#57B9BB'}/>
      <Ionicons name='ios-checkmark-circle' size={32} color={'#57B9BB'}/>
      <Ionicons name='ios-checkmark-circle' size={32} color={'#57B9BB'}/>
</View>

样式

  iconCompleted:{
    justifyContent:'space-between',
    alignItems: 'center',
    height:200, 
  },
 dash:{
    width:1, 
    height: 180, 
    position: 'absolute', 
    top:0, 
    alignContent:'center', 
    alignSelf:'center',
    flexDirection:'column',
 },

【问题讨论】：

标签： javascript css reactjs react-native

【解决方案1】：

要在图标之间放置线条，您只需使用 flexDirection: 'column'。

<View style={styles.iconCompleted}>
      <Ionicons name='ios-checkmark-circle' size={32} color={'#57B9BB'}/>
      <Dash dashColor={'#57B9BB'} style={styles.dash}/>
      <Ionicons name='ios-checkmark-circle' size={32} color={'#57B9BB'}/>
      <Dash dashColor={'#57B9BB'} style={styles.dash}/>
      <Ionicons name='ios-checkmark-circle' size={32} color={'#57B9BB'}/>
      <Dash dashColor={'#57B9BB'} style={styles.dash}/>
      <Ionicons name='ios-checkmark-circle' size={32} color={'#57B9BB'}/>
</View>


        const styles = StyleSheet.create({
            iconCompleted:{
            flexDirection: 'column',  
            alignItems: 'center',
            height:200, 
          },
         dash:{
            width:1, 
            height: 80, 
            top:0, 
            alignContent:'center', 
            alignSelf:'center',
            flexDirection:'column',
         },
        });

【讨论】：

谢谢，请再次查看我的源代码，我添加了更多图标。
只需添加图标、破折号、图标、破折号......根据需要多次。检查我的答案的编辑

【解决方案2】：

当我运行代码时，看起来你想用虚线连接两个图标，但不幸的是线重叠，你可以改变样式如下连接两个图标而不重叠线

iconCompleted:{
    justifyContent:'space-between',
    alignItems: 'center',
    height:200, 
    zIndex:10
},
dash:{
    width:1, 
    height: 200-(64), 
    position: 'absolute', 
    top:32, 
    alignContent:'center', 
    alignSelf:'center',
    flexDirection:'column',
    zIndex:9
},

如果这解决了您的要求，请发表评论，如果需要，我可以提供替代解决方案

【讨论】：

仍然重叠
你能看到我的截图ibb.co/9bQJZPZ，你需要同样的吗？
类似，请再次查看我的源代码，我添加了更多图标。
在我上面的代码中，您能否为图标添加样式为 iconz:{zIndex:99,backgroundColor:'#fff' } 注意：backgroundColor 应该是您的背景颜色也请根据调整高度值根据您的要求