Android 如何在两个点之间画一条线？

我正在研究React Native

实际上我想在react native中的两点之间画一条线

关键是我开始触摸和释放触摸的位置

我正在用penResponder做这个。 使用penResponder，我得到了这一点。在哪里开始触摸，在哪里释放触摸

这是我的代码：

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

import React，{Component}来自'React'；
进口{
样式表，
看法
平台，
文本，
应答器，
形象,，
}从“反应本机”；
导出默认类应用程序扩展组件{
构造函数（）{
超级（）；
//初始化状态
这个。应答器；
此.state={
地点X:0，
地点:0,，
地点X:0，
地点SY:0，
};
//panResponder初始化
this.panResponder=panResponder.create({
onStartShouldSetPanResponder:（事件，手势状态）=>true，
onStartShouldSetPanResponderCapture:（事件、手势状态）=>{
这是我的国家({
位置X:event.nativeEvent.locationX.toFixed（2），
位置：event.nativeEvent.locationY.toFixed（2），
});
},
onMoveShouldSetPanResponder:（事件，手势状态）=>false，
onMoveShouldSetPanResponderCapture:（事件，手势状态）=>false，
onPanResponderGrant:（事件，手势状态）=>false，
onPanResponderMove:（事件，手势状态）=>{}，
onPanResponderRelease:（事件，手势状态）=>{
这是我的国家({
位置X:event.nativeEvent.locationX.toFixed（2），
位置SY:event.nativeEvent.locationY.toFixed（2），
});
},
});
这是我的国家({
地点X:0，
地点:0,，
地点X:0，
地点SY:0，
});
}
render（）{
返回(
);
}
}
const styles=StyleSheet.create({
主容器：{
弹性：1，
},
儿童视图：{
弹性：1，
溢出：“隐藏”，
},
要点：{
身高：22，
宽度：22，
玛金托普：5，
位置：'绝对'，
边界半径：14，
背景色：“#afeee”，
},
});

但如何在这两点之间划清界限呢

实际上我想要这个：

请帮忙！ 提前感谢。

您可以使用svg（）来完成此操作。我建议您将PanResponder放在svg的顶部以处理触摸

Svg示例：

<Svg height={windowHeight} width={windowWidth}>
  <Line x1={startTouch.x} y1={startTouch.y} x2={endTouch.x} y2={endTouch.y} stroke="red" strokeWidth="2" />
</Svg>

OK。这对我有帮助。但是把你的PanResponder放在svg的上面，这意味着你的svg需要在PanResponder的下面。所以在你的代码中放上pan，如果需要的话，在上面使用zIndex或者positon absolute之类的东西。嗯，好的，明白了。当显示行时，我想添加动画。像法登。你有办法吗@BloodyMonkey可以使用react native提供的动画