我想在react native中实现一个如下的ui组件。expected result作为一个初学者，这是我的努力，但无论我采用什么方法，点和虚线都没有对齐。result i get这是我到目前为止为实现上述结果而写的代码。

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

我要将Map位置A的起点与位置文本A对齐，将Map位置B的起点与位置文本B对齐。