javascript - 在 React Native 中将线放在图标下方

Question

这里我有两个图标和一条虚线。目前，线条位于图标之上。如何把图标放在前面，在图标后面划线？

<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',
 },

Answer 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',
         },
        });