问如何在两点之间划出一条线来反应本土化？

EN

import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Platform,
    Text,
    PanResponder,
    Image,
} from 'react-native';

export default class App extends Component {
    constructor() {
        super();
        //initialize state
        this.panResponder;
        this.state = {
            locationX: 0,
            locationY: 0,

            locationSX: 0,
            locationSY: 0,
        };

        //panResponder initialization
        this.panResponder = PanResponder.create({
            onStartShouldSetPanResponder: (event, gestureState) => true,
            onStartShouldSetPanResponderCapture: (event, gestureState) => {
                this.setState({
                    locationX: event.nativeEvent.locationX.toFixed(2),
                    locationY: event.nativeEvent.locationY.toFixed(2),
                });
            },
            onMoveShouldSetPanResponder: (event, gestureState) => false,
            onMoveShouldSetPanResponderCapture: (event, gestureState) => false,
            onPanResponderGrant: (event, gestureState) => false,
            onPanResponderMove: (event, gestureState) => {},
            onPanResponderRelease: (event, gestureState) => {
                this.setState({
                    locationSX: event.nativeEvent.locationX.toFixed(2),
                    locationSY: event.nativeEvent.locationY.toFixed(2),
                });
            },
        });
        this.setState({
            locationX: 0,
            locationY: 0,

            locationSX: 0,
            locationSY: 0,
        });
    }
    render() {
        return (
            <View style={styles.MainContainer}>
                <View style={styles.childView}>
                    <View
                        style={[
                            {
                                height: 22,
                                width: 22,
                                marginTop: 5,
                                position: 'absolute',
                                borderRadius: 14,
                                backgroundColor: '#afeeee',
                            },
                            {
                                top: parseFloat(this.state.locationY - 5),
                                left: parseFloat(this.state.locationX - 15),
                            },
                        ]}
                    />

                    <View
                        style={[
                            {
                                height: 22,
                                width: 22,
                                marginTop: 5,
                                position: 'absolute',
                                borderRadius: 14,
                                backgroundColor: '#afeeee',
                            },
                            {
                                top: parseFloat(this.state.locationSY - 2),
                                left: parseFloat(this.state.locationSX - 11),
                            },
                        ]}
                    />

                    <View
                        style={{flex: 1, backgroundColor: 'transparent'}}
                        {...this.panResponder.panHandlers}
                    />
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    MainContainer: {
        flex: 1,
    },

    childView: {
        flex: 1,
        overflow: 'hidden',
    },
    point: {
        height: 22,
        width: 22,
        marginTop: 5,
        position: 'absolute',
        borderRadius: 14,
        backgroundColor: '#afeeee',
    },
});