React Native行程点UI组件标记点与虚线对齐问题求助

我想要在React Native中实现如图所示的UI组件：
目标UI效果

作为新手，我尝试实现后，标记点和虚线始终无法对齐，效果如下：
当前错误效果

以下是我目前编写的代码，恳请指导正确的解决方向：

import { View, Text, StyleSheet } from 'react-native'
import React from 'react'
import * as Svg from "react-native-svg";
import OriginPin from '../../../../assets/svgs/map_search_origin.svg';
import DestinationPin from '../../../../assets/svgs/map_search_destination.svg';


export default function TripDetailPoints(props) {
    const DashedLine = (props) =>
    (
        <Svg.Svg height={props.height ? props.height : "100%"} width={1} style={{ alignSelf: 'flex-start', marginLeft: 10 }}>
            <Svg.Line
                stroke={props.strokeColor}
                strokeDasharray="3,3"
                x1="0"
                y1="0"
                x2="0"
                y2={props.height ? props.height : "100%"}
            />
        </Svg.Svg>
    );

    return (
        <View>
            <View style={styles.points}>
                <View style={styles.point_icons}>
                    <OriginPin width="20" height="20" />
                    <DashedLine strokeColor="#21b90f" height="100%" />
                    <DestinationPin width="20" height="20" />
                </View>
                <View style={styles.point_names}>
                    <View style={{ height: "40%" }}>
                        <View>
                            <Text style={styles.node_title}>
                                ORIGIN
                            </Text>
                            <Text style={styles.node_name}>New York</Text>
                        </View>
                    </View>
                    <View style={{ height: "40%" }}>
                        <View>
                            <Text style={styles.node_title}>
                                DESTINATION
                            </Text>
                            <Text style={styles.node_name}>Dallas</Text>
                        </View>
                    </View>
                </View>
            </View>
        </View>

    )
}
const styles = StyleSheet.create({
    points: {
        marginHorizontal: 10,
        flexDirection: "row",
        height: 180,
        justifyContent: "center",
        alignItems: "center"
    },
    point_icons: {
        flex: 1,
        justifyContent: "center",
        alignItems: "flex-start",
        marginVertical: 30,
        marginRight: -50
    },
    point_names: {
        flex: 3,
    },
    node_title: {
        fontSize: 16,
        color: "#757575",
        fontWeight: "500",
    },
    node_name: {
        fontSize: 18,
        fontWeight: "bold",
        color: '#000'
    }
});

解决方向 #

问题核心在于图标与虚线的布局对齐逻辑错误，调整以下几点即可修复：

1. 重构图标容器布局
   将point_icons的justifyContent改为space-between，让起点图标贴顶部、终点图标贴底部，虚线自动填充中间空隙；同时去掉破坏布局的偏移值，改为居中对齐：

   point_icons: {
       flex: 1,
       justifyContent: "space-between",
       alignItems: "center",
   },
   

2. 修正虚线的居中对齐
   移除虚线的marginLeft，并将SVG线条的x1/x2设为0.5，让1px宽的线条在容器中居中，避免偏移：

   const DashedLine = (props) => (
       <Svg.Svg height="100%" width={1} style={{ alignSelf: 'stretch' }}>
           <Svg.Line
               stroke={props.strokeColor}
               strokeDasharray="3,3"
               x1="0.5"
               y1="0"
               x2="0.5"
               y2="100%"
           />
       </Svg.Svg>
   );
   

3. 优化文字容器的对齐逻辑
   去掉文字子View的固定高度，改用flex:1分配空间，分别让起点文字贴顶部、终点文字贴底部，和图标对应：

   <View style={styles.point_names}>
       <View style={{ flex: 1, justifyContent: "flex-start" }}>
           <Text style={styles.node_title}>ORIGIN</Text>
           <Text style={styles.node_name}>New York</Text>
       </View>
       <View style={{ flex: 1, justifyContent: "flex-end" }}>
           <Text style={styles.node_title}>DESTINATION</Text>
           <Text style={styles.node_name}>Dallas</Text>
       </View>
   </View>
   

4. 调整主容器布局
   移除主容器points的alignItems: "center"，让子容器自然填充整个高度：

   points: {
       marginHorizontal: 10,
       flexDirection: "row",
       height: 180,
   },
   

内容的提问来源于stack exchange，提问作者Saluh