Как рассчитать собственные координаты экрана - PullRequest
1 голос
/ 07 мая 2020

Я хочу переместить элемент вправо, чтобы разместить его. Я нажимаю с событием onPress.

Пример, если я нажимаю на экран с позицией x: 200, y: 300, поэтому мой элемент должен переместиться туда из позиции x: -100, y: -100 , Я пробовал, но он не перемещается в то положение, которое я нажимаю на экране. мой код: , хотя он перемещается, но перемещается не совсем туда, куда я хочу ...

const styles = StyleSheet.create({
    alertAutoCloseContainer: {
        left: 0, top: 0,
        margin: 10, marginHorizontal: 40, position: 'absolute',
        padding: 10, maxWidth: 500, maxHeight: 400, zIndex: 1000,
        backgroundColor: 'rgba(0, 50, 50, 0.8)', borderRadius: 5,
    },
    alertAutoCloseText: {
        color: '#fff', fontFamily: 'IRANSansMobile'
    }
});

const { Value } = Animated;
const animatedValue = new Value(0);


const MyAlert = memo(forwardRef(({ }, ref) => {

    const [state, setState] = useReducer((s, v) => v, {
        status: true, xAxis: 0, yAxis: 0, parentData: {
            text: ""
        }
    });

    useImperativeHandle(ref, () => {

        return ({

            startAnimation: ({ xAxis, yAxis, parentData }) => {

                const { status } = state;

                setState({
                    ...state, xAxis, yAxis,
                    parentData, status: !status
                });

                Animated.timing(animatedValue, {
                    toValue: status === true ? 1 : 0, duration: 500
                }).start();
            },

            stopAnimation: ({ }) => {
                Animated.timing(animatedValue, {
                    toValue: 0, duration: 500
                }).start();
            }

        })
    });

    console.log(state.xAxis, state.yAxis);

    return (
        <Animated.View style={{
            ...styles.alertAutoCloseContainer, transform: [
                {
                    translateY: animatedValue.interpolate({
                        inputRange: [0, 1],
                        outputRange: [0, state.yAxis],
                        extrapolate: 'clamp'
                    })
                },
                {
                    translateX: animatedValue.interpolate({
                        inputRange: [0, 1],
                        outputRange: [0, state.xAxis],
                        extrapolate: 'clamp'
                    })
                },
                {
                    scale: animatedValue.interpolate({
                        inputRange: [0, 1],
                        outputRange: [0, 1]
                    })
                }
            ]
        }}>

            <Text style={styles.alertAutoCloseText}>
                {state.parentData.text}
            </Text>

        </Animated.View>
    );
}), (p, n) => true);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...