首先，通过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

                })

            }

        }

    });

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

                }