我做了一個側面菜單，但是PanResponder在電話上不起作用

Question

我做了一個側面菜單， genymotion沒關系 ，但是不能在我的手機上使用。 它的響應是延遲超過10秒，大多數時候電話都沒有響應。請幫助我！

一開始，我認為是流程原因：1，位置：“絕對” 2，PanResponder包裝器是可觸摸的

我試過清理它，但是它也不起作用。也許是個錯誤，對嗎？

在此處輸入圖片說明

 import React, {Component} from 'react' import { View, Text, StyleSheet, ScrollView, Alert, PanResponder, TouchableOpacity } from 'react-native' import {get_pointBaikeCate} from 'api' import {Touchable} from 'basic' export default class PointBaike extends Component { static navigationOptions = { title: '穴位百科', header: null } constructor(props) { super(props); this.state = { info: [] } this.scrollY = [] } async getInfo() { let res = await get_pointBaikeCate(); console.log(res) // let info = []; // res.data.map((r)=> { // r.content.map(c=> { // let flag = info.find((item)=> { // return item.jl == c.jl // }) // if (flag) { // flag.xw += `,${c.xw}` // } else { // info.push({ // jl: c.jl, // xw: c.xw // }) // } // }) // }); // // // 對info的xw進行過濾// info = info.map((item)=> { // let xw = item.xw.split(/[,|]/) // item.xw = [...new Set(xw)].filter((x)=> { // return x // }) // return item // }); this.setState({ info: res.data }) } goDetail(item) { let {navigate} = this.props.navigation console.log(item) navigate('PointBaikeDetail', { item }) } componentWillMount() { this.getInfo() this._panResponder = PanResponder.create({ onStartShouldSetPanResponder: this._handleStartShouldSetPanResponder.bind(this), onStartShouldSetPanResponderCapture: this._handleStartShouldSetPanResponderCapture.bind(this), onMoveShouldSetPanResponder: this._handlerMoveShouldSetPanResponder.bind(this), onMoveShouldSetPanResponderCapture: this._handleMoveShouldSetPanResponderCapture.bind(this), onPanResponderTerminationRequest: this._handleMoveShouldSetPanResponderCapture, onPanResponderMove: this._handlePanResponderMove.bind(this), }); } _handlerMoveShouldSetPanResponder(evt, gestureState){ if (gestureState.dx != 0 && gestureState.dy == 0) { return true; } return false; } _handleMoveShouldSetPanResponderCapture(evt, gestureState) { return gestureState.dx != 0 && gestureState.dy != 0 } _handleStartShouldSetPanResponderCapture(evt, gestureState) { return gestureState.dx != 0 && gestureState.dy != 0; } _handleMoveShouldSetPanResponderCapture(evt, gestureState) { return gestureState.dx != 0 && gestureState.dy != 0; } _scrollTo(index) { // Alert.alert('索引', `${index}`) this._scrollView.scrollTo({y: this.scrollY[index]}) } _handleStartShouldSetPanResponder() { return true } _handlePanResponderMove(e, gestureState) { // console.log('滑動', e.nativeEvent.pageY) // 計算手指在那個元素上，得出index，然后根據index設置scrollTop let y = e.nativeEvent.pageY - 100 let index = Math.ceil(y / 20) - 1 console.log(index, this) this._scrollView.scrollTo({y: this.scrollY[index]}) } _onLayout({nativeEvent}) { this.scrollY.push(nativeEvent.layout.y) } render() { let {info} = this.state return ( <View style={styles.wrapper}> <ScrollView style={{flex: 1, height: 300}} showsVerticalScrollIndicator={false} ref={(e)=> { this._scrollView = e }} > { info.map((item, i)=> { return ( <View key={i} style={styles.lists} onLayout={this._onLayout.bind(this)} > <View> <Text style={styles.title}>{item.title}</Text> </View> <View style={styles.listBox}> { item.list.map((x, xi)=> { return ( <Touchable key={xi} onPress={this.goDetail.bind(this, x)} > <View style={styles.list}> <Text style={styles.text}>{x.title}</Text> </View> </Touchable> ) }) } </View> </View> ) }) } <View style={{height: 100}}></View> </ScrollView> <View style={styles.sideMenu} {...this._panResponder.panHandlers} > { info.map((item, i)=> { return ( <TouchableOpacity key={i} onPress={this._scrollTo.bind(this, i)}> <View> <Text style={styles.sideText}>{item.title.charAt(3) || item.title.charAt(0)}</Text> </View> </TouchableOpacity> ) }) } </View> </View> ) } } const styles = StyleSheet.create({ wrapper: { paddingLeft: 6, paddingRight: 6, paddingTop: 10, paddingBottom: 10, flex: 1, backgroundColor: '#fff' }, sideText: { width: 25, height: 20, lineHeight: 20, textAlign: 'center' }, sideMenu: { position: 'absolute', right: 0, top: 100, zIndex: 100, backgroundColor: '#eee' }, lists: {}, listBox: { flexDirection: 'row', flexWrap: 'wrap' }, list: { width: (WinWidth - 20) / 5, }, title: { fontSize: 18, color: DEFAULT_COLOR, paddingTop: 14, paddingBottom: 10 }, text: { flex: 1, textAlign: 'center', paddingTop: 10, paddingBottom: 10, } }) 

Answer 1

你可以試試這個

componentWillMount() {
    this.getInfo()

    this._panResponder = PanResponder.create({
        onStartShouldSetPanResponder: () => true,
        onStartShouldSetPanResponderCapture: this._handleStartShouldSetPanResponderCapture.bind(this),
        onMoveShouldSetPanResponder: this._handlerMoveShouldSetPanResponder.bind(this),
        onMoveShouldSetPanResponderCapture: this._handleMoveShouldSetPanResponderCapture.bind(this),
        onPanResponderTerminationRequest: this._handleMoveShouldSetPanResponderCapture,
        onPanResponderMove: this._handlePanResponderMove.bind(this),
    });
}