Как расширить сенсорную зону - PullRequest
Новая
       25

Как расширить сенсорную зону

0 голосов
/ 01 ноября 2018

У меня есть изменяемые размеры компонентов путем перетаскивания. Скрипты, как показано ниже. 

import React, { Component } from 'react'; 
import { StyleSheet, View, Dimensions, PanResponder, Animated } from 'react-native';

export default class MyComponent extends Component {

    constructor(props) {
        super(props);

        this.state = {
            offset          : 0,
            topHeight       : 40, // min height for top pane header
            bottomHeight    : 40, // min height for bottom pane header,
            deviceHeight    : Dimensions.get('window').height,
            isDividerClicked: false,

            pan             : new Animated.ValueXY()
        }

    }

    componentWillMount() {
        this._panResponder = PanResponder.create({
            onMoveShouldSetResponderCapture: () => true,
            onMoveShouldSetPanResponderCapture: () => true,

            // Initially, set the Y position offset when touch start
            onPanResponderGrant: (e, gestureState) => {
                this.setState({
                    offset: e.nativeEvent.pageY,
                    isDividerClicked: true
                })
            },

            // When we drag the divider, set the bottomHeight (component state) again.
            onPanResponderMove: (e, gestureState) => {

                this.setState({
                    bottomHeight    : gestureState.moveY > (this.state.deviceHeight - 40) ? 40 : this.state.deviceHeight - gestureState.moveY,
                    offset: e.nativeEvent.pageY
                })
            },

            onPanResponderRelease: (e, gestureState) => {
                // Do something here for the touch end event
                this.setState({
                    offset: e.nativeEvent.pageY,
                    isDividerClicked: false
                })
            }
        });
    }


    render() {
        return ( 
            <View style={styles.content}>

                {/* Top View */}
                <Animated.View 
                    style       = {[{backgroundColor: 'pink', minHeight: 40, flex: 1}, {height: this.state.topHeight}]}

                >
                </Animated.View>

                {/* Divider */}
                <View 
                    style={[{height: 10}, this.state.isDividerClicked ? {backgroundColor: '#666'} : {backgroundColor: '#e2e2e2'}]} 
                    {...this._panResponder.panHandlers}
                >
                </View>

                {/* Bottom View */}
                <Animated.View 
                    style={[{backgroundColor: 'green', minHeight: 40}, {height: this.state.bottomHeight}]} 

                >
                </Animated.View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    content         : {
        flex        : 1,
        flexDirection: 'column'
    },
})

https://github.com/brucelin0325/resizable_layout

Я хочу расширить сенсорную область разделителя, чтобы улучшить взаимодействие с пользователем. Так как высота установлена ​​на 10, сложно нажать и недостаточно для UX.

Я пытался с этим hitSlop prop, но, кажется, не работает. Любые предложения, пожалуйста.

(я использовал PanResponder для перетаскивания)

...