react native 手势响应

朱雀 2021-03-18 15:17 615阅读 0赞

官方文档地址：[https://facebook.github.io/react-native/docs/panresponder.html][https_facebook.github.io_react-native_docs_panresponder.html]

官方翻译地址：[https://reactnative.cn/docs/0.50/panresponder.html][https_reactnative.cn_docs_0.50_panresponder.html]

首先，通过react native引入PanResponder

import {PanResponder} from 'react-native';
    
    
    　　//这里是当移动了超过20，才会进行隐藏或是显示
        _panResponder = PanResponder.create({

onStartShouldSetPanResponder: () => true,
            onMoveShouldSetPanResponder: () => true,
            onPanResponderGrant: () => {
                console.log('开始移动：');
                this.setState({ moveBG: '#eeeeee' })
            },
            onPanResponderMove: (evt, gs) => {
                console.log('正在移动：X轴：' + gs.dx + '，Y轴：' + gs.dy);
            },
            onPanResponderRelease: (evt, gs) => {
                console.log('结束移动：X轴：' + gs.dx + '，Y轴：' + gs.dy);
                this.setState({
                    moveBG: '#FFF'
                });
                if (gs.dy > 20) {
                    this.setState({
                        IsShowOrderInfoFlag: true
                    })
                } else if (gs.dy < -20) {
                    this.setState({
                        IsShowOrderInfoFlag: false
                    })
                }
            }
        });

以上为声明手势响应，将手势响应方法放入至某一个View中

Render方法中
    <View style={styles.container}>
                    {
                        this.state.IsShowOrderInfoFlag ?
                            <View style={[styles.headerView, { backgroundColor: '#e0e0e0' }]}>
                                <Text style={styles.orderInfoLabel}>{I18n.t('Component.HandmadeCheck.ComponentValue.Order.zdCode_Text')}{
        this.props.bundleEntity.bundleInfo.zdCode}</Text>
                                <Text style={styles.orderInfoLabel}>{I18n.t('Component.HandmadeCheck.ComponentValue.Order.Customer_Text')}{
        this.props.bundleEntity.bundleInfo.custName}|{
        this.props.bundleEntity.bundleInfo.custCode}</Text>
                                <Text style={styles.orderInfoLabel}>{I18n.t('Component.HandmadeCheck.ComponentValue.Bundle.Bundle_Text')}{
        this.props.bundleEntity.bundleInfo.bundle.groupNo}</Text>
                            </View>
                            :
                            null
                    }
                    <View style={[styles.headerView, { backgroundColor: this.state.moveBG }]} {...this._panResponder.panHandlers}>
                        <Text style={styles.headerLabel}>{I18n.t('Component.HandmadeCheck.ComponentValue.QAComment_Text')}</Text>
                        <TextInput style={styles.qaCommentText}
                            placeholder={I18n.t('Component.HandmadeCheck.ComponentValue.QAComment_Placeholder')}
                            maxLength={10000}
                            multiline={
        true}
                            returnKeyType='done'
                            onChangeText={(text) => {
                                let oldHandmadeCheckData = this.state.HandmadeCheckData;
                                oldHandmadeCheckData.QAComment = text;
                                this.setState({ HandmadeCheckData: oldHandmadeCheckData })
                            }}
                            value={
        this.state.HandmadeCheckData.QAComment}
                        />
                        <Button onPress={() => {
                            this._removeQAComment();
                        }}>
                            <Icon style={styles.removeQACommentIcon} name="remove" size={32} />
                        </Button>
                        <Button onPress={() => {
                            this.refs.qaCommentModal.showQACommentModal(this.props.handmadeCheckEntity.AllQACommentList, this);
                        }}>
                            <Icon style={styles.qaCommentIcon} name="comment" size={32} />
                        </Button>
    
                        <Text style={styles.headerLabel}>{I18n.t('Component.HandmadeCheck.ComponentValue.Pass_Product_Count_Text')}</Text>
                        <TextInput style={styles.EditText}
                            placeholder={I18n.t('Component.HandmadeCheck.ComponentValue.Pass_Product_Count_Placeholder')}
                            editable={
        true}
                            keyboardType='numeric'
                            returnKeyType='done'
                            value={
        this.state.PassProductCount}
                            onBlur={() => {
                                this.props.onSetPassProduct(this.state.PassProductCount)
                            }}
                            onChangeText={(text) => {
                                this.setState({ PassProductCount: text })
                            }}
                        />
                        <Text style={styles.headerLabel}>{I18n.t('Component.HandmadeCheck.ComponentValue.Can_Not_Rework_Product_Count_Text')}</Text>
                        <TextInput style={styles.EditText}
                            placeholder={I18n.t('Component.HandmadeCheck.ComponentValue.Can_Not_Rework_Product_Count_Placeholder')}
                            editable={
        true}
                            keyboardType='numeric'
                            returnKeyType='done'
                            value={
        this.state.CanNotReworkProductCount}
                            onBlur={() => {
                                this.props.onSetCannotReworkProduct(this.state.CanNotReworkProductCount)
                            }}
                            onChangeText={(text) => {
                                this.setState({ CanNotReworkProductCount: text })
                            }}
                        />
                    </View>
                    {
                        this.state.IsShowOrderInfoFlag ?
                            <View style={styles.headerView}>
                                <Text style={styles.headerLabel}>{I18n.t('Component.HandmadeCheck.ComponentValue.CheckTime_Text')}</Text>
                                <TextInput style={styles.checkTimeText}
                                    placeholder={I18n.t('Component.HandmadeCheck.ComponentValue.CheckTime_Placeholder')}
                                    editable={
        false}
                                    keyboardType='numeric'
                                    returnKeyType='done'
                                    value={
        this.state.HandmadeCheckData.CheckTime}
                                />
                                <Text style={styles.headerLabel}>{I18n.t('Component.HandmadeCheck.ComponentValue.Request_Check_Count_Text')}</Text>
                                <TextInput style={styles.checkTimeText}
                                    placeholder={I18n.t('Component.HandmadeCheck.ComponentValue.Request_Check_Count_Placeholder')}
                                    editable={
        false}
                                    keyboardType='numeric'
                                    returnKeyType='done'
                                    value={
        this.state.RequestCheckCount}
                                />
                                <Text style={styles.headerLabel}>{I18n.t('Component.HandmadeCheck.ComponentValue.Issue_Product_Count_Text')}</Text>
                                <TextInput style={styles.checkTimeText}
                                    placeholder={I18n.t('Component.HandmadeCheck.ComponentValue.Issue_Product_Count_Placeholder')}
                                    editable={
        false}
                                    keyboardType='numeric'
                                    returnKeyType='done'
                                    value={
        this.state.IssueProductCount}
                                />
                                <Text style={styles.headerLabel}>{I18n.t('Component.HandmadeCheck.ComponentValue.Handmade_Issue_Product_Count_Text')}</Text>
                                <TextInput style={styles.checkTimeText}
                                    placeholder={I18n.t('Component.HandmadeCheck.ComponentValue.Handmade_Issue_Product_Count_Placeholder')}
                                    editable={
        false}
                                    keyboardType='numeric'
                                    returnKeyType='done'
                                    value={
        this.state.HandmadeIssueProductCount}
                                />
                                <Text style={styles.headerLabel}>{I18n.t('Component.HandmadeCheck.ComponentValue.Non_Handmade_Issue_Product_Count_Text')}</Text>
                                <TextInput style={styles.checkTimeText}
                                    placeholder={I18n.t('Component.HandmadeCheck.ComponentValue.Non_Handmade_Issue_Product_Count_Placeholder')}
                                    editable={
        false}
                                    keyboardType='numeric'
                                    returnKeyType='done'
                                    value={
        this.state.NonHandmadeIssueProductCount}
                                />
                            </View>
                            : null
                    }

效果

![299612-20180510105311256-1044124810.gif][]

[https_facebook.github.io_react-native_docs_panresponder.html]: https://facebook.github.io/react-native/docs/panresponder.html
[https_reactnative.cn_docs_0.50_panresponder.html]: https://reactnative.cn/docs/0.50/panresponder.html
[299612-20180510105311256-1044124810.gif]: /images/20210318/1616080591105.gif