0
私はサイドメニューを作っています、私は携帯電話では動作しませんが、はgenymotionでOKです。それは応答が10秒以上の遅延であり、ほとんどの時間はphone.pleaseの応答ではありません！冒頭私はサイドメニューを作っていますが、PanResponderは電話では機能しません
が、私はそれがフロー理由だと思う： 1、ポジション： 2「絶対」、PanResponderは触れることができる
ラッパー、私はこれをきれいにしようとしていたが、それはそのバグをwork.maybeもありませんあなたは？
import React, {Component} from 'react'
import {
\t View,
\t Text,
\t StyleSheet,
\t ScrollView,
\t Alert,
\t PanResponder,
\t TouchableOpacity
} from 'react-native'
import {get_pointBaikeCate} from 'api'
import {Touchable} from 'basic'
export default class PointBaike extends Component {
\t static navigationOptions = {
\t \t title: '穴位百科',
\t \t header: null
\t }
\t
\t constructor(props) {
\t \t super(props);
\t \t this.state = {
\t \t \t info: []
\t \t }
\t \t
\t \t this.scrollY = []
\t }
\t
\t async getInfo() {
\t \t let res = await get_pointBaikeCate();
\t \t console.log(res)
\t \t
\t \t // let info = [];
\t \t // res.data.map((r)=> {
\t \t // \t r.content.map(c=> {
\t \t // \t \t let flag = info.find((item)=> {
\t \t // \t \t \t return item.jl == c.jl
\t \t // \t \t })
\t \t // \t \t if (flag) {
\t \t // \t \t \t flag.xw += `,${c.xw}`
\t \t // \t \t } else {
\t \t // \t \t \t info.push({
\t \t // \t \t \t \t jl: c.jl,
\t \t // \t \t \t \t xw: c.xw
\t \t // \t \t \t })
\t \t // \t \t }
\t \t // \t })
\t \t // });
\t \t //
\t \t // // 对info的xw进行过滤
\t \t // info = info.map((item)=> {
\t \t // \t let xw = item.xw.split(/[,|]/)
\t \t // \t item.xw = [...new Set(xw)].filter((x)=> {
\t \t // \t \t return x
\t \t // \t })
\t \t // \t return item
\t \t // });
\t \t
\t \t this.setState({
\t \t \t info: res.data
\t \t })
\t }
\t
\t goDetail(item) {
\t \t let {navigate} = this.props.navigation
\t \t console.log(item)
\t \t navigate('PointBaikeDetail', {
\t \t \t item
\t \t })
\t }
\t
\t componentWillMount() {
\t \t this.getInfo()
\t \t
\t \t this._panResponder = PanResponder.create({
\t \t \t onStartShouldSetPanResponder: this._handleStartShouldSetPanResponder.bind(this),
\t \t \t onStartShouldSetPanResponderCapture: this._handleStartShouldSetPanResponderCapture.bind(this),
\t \t \t onMoveShouldSetPanResponder: this._handlerMoveShouldSetPanResponder.bind(this),
\t \t \t onMoveShouldSetPanResponderCapture: this._handleMoveShouldSetPanResponderCapture.bind(this),
\t \t \t onPanResponderTerminationRequest: this._handleMoveShouldSetPanResponderCapture,
\t \t \t onPanResponderMove: this._handlePanResponderMove.bind(this),
\t \t });
\t }
\t _handlerMoveShouldSetPanResponder(evt, gestureState){
\t \t if (gestureState.dx != 0 && gestureState.dy == 0) {
\t \t \t return true;
\t \t }
\t \t return false;
\t }
\t
\t _handleMoveShouldSetPanResponderCapture(evt, gestureState) {
\t \t return gestureState.dx != 0 && gestureState.dy != 0
\t }
\t
\t _handleStartShouldSetPanResponderCapture(evt, gestureState) {
\t \t return gestureState.dx != 0 && gestureState.dy != 0;
\t }
\t
\t _handleMoveShouldSetPanResponderCapture(evt, gestureState) {
\t \t return gestureState.dx != 0 && gestureState.dy != 0;
\t }
\t
\t _scrollTo(index) {
\t \t // Alert.alert('索引', `${index}`)
\t \t
\t \t this._scrollView.scrollTo({y: this.scrollY[index]})
\t }
\t
\t _handleStartShouldSetPanResponder() {
\t \t return true
\t }
\t
\t _handlePanResponderMove(e, gestureState) {
\t \t // console.log('滑动', e.nativeEvent.pageY)
\t \t // 计算手指在那个元素上，得出index，然后根据index设置scrollTop
\t \t let y = e.nativeEvent.pageY - 100
\t \t let index = Math.ceil(y/20) - 1
\t \t console.log(index, this)
\t \t
\t \t this._scrollView.scrollTo({y: this.scrollY[index]})
\t }
\t
\t
\t _onLayout({nativeEvent}) {
\t \t this.scrollY.push(nativeEvent.layout.y)
\t }
\t
\t render() {
\t \t let {info} = this.state
\t \t return (
\t \t \t <View style={styles.wrapper}>
\t \t \t \t
\t \t \t \t <ScrollView style={{flex: 1, height: 300}}
\t \t \t \t showsVerticalScrollIndicator={false}
\t \t \t \t ref={(e)=> {
\t \t \t \t \t this._scrollView = e
\t \t \t \t }}
\t \t \t \t >
\t \t \t \t \t {
\t \t \t \t \t \t info.map((item, i)=> {
\t \t \t \t \t \t \t return (
\t \t \t \t \t \t \t \t <View key={i} style={styles.lists}
\t \t \t \t \t \t \t \t onLayout={this._onLayout.bind(this)}
\t \t \t \t \t \t \t \t >
\t \t \t \t \t \t \t \t \t <View>
\t \t \t \t \t \t \t \t \t \t <Text style={styles.title}>{item.title}</Text>
\t \t \t \t \t \t \t \t \t </View>
\t \t \t \t \t \t \t \t \t <View style={styles.listBox}>
\t \t \t \t \t \t \t \t \t \t
\t \t \t \t \t \t \t \t \t \t {
\t \t \t \t \t \t \t \t \t \t \t item.list.map((x, xi)=> {
\t \t \t \t \t \t \t \t \t \t \t \t return (
\t \t \t \t \t \t \t \t \t \t \t \t \t <Touchable key={xi}
\t \t \t \t \t \t \t \t \t \t \t \t \t onPress={this.goDetail.bind(this, x)}
\t \t \t \t \t \t \t \t \t \t \t \t \t >
\t \t \t \t \t \t \t \t \t \t \t \t \t \t <View style={styles.list}>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <Text
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t style={styles.text}>{x.title}</Text>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t </View>
\t \t \t \t \t \t \t \t \t \t \t \t \t </Touchable>
\t \t \t \t \t \t \t \t \t \t \t \t)
\t \t \t \t \t \t \t \t \t \t \t })
\t \t \t \t \t \t \t \t \t \t }
\t \t \t \t \t \t \t \t \t </View>
\t \t \t \t \t \t \t \t </View>
\t \t \t \t \t \t \t)
\t \t \t \t \t \t })
\t \t \t \t \t }
\t \t \t \t \t <View style={{height: 100}}></View>
\t \t \t \t </ScrollView>
\t \t \t \t <View style={styles.sideMenu}
\t \t \t \t {...this._panResponder.panHandlers}
\t \t \t \t >
\t \t \t \t \t {
\t \t \t \t \t \t info.map((item, i)=> {
\t \t \t \t \t \t \t return (
\t \t \t \t \t \t \t \t <TouchableOpacity key={i} onPress={this._scrollTo.bind(this, i)}>
\t \t \t \t \t \t \t \t \t <View>
\t \t \t \t \t \t \t \t \t \t <Text
\t \t \t \t \t \t \t \t \t \t \t style={styles.sideText}>{item.title.charAt(3) || item.title.charAt(0)}</Text>
\t \t \t \t \t \t \t \t \t </View>
\t \t \t \t \t \t \t \t </TouchableOpacity>
\t \t \t \t \t \t \t)
\t \t \t \t \t \t })
\t \t \t \t \t }
\t \t \t \t </View>
\t \t \t </View>
\t \t)
\t }
}
const styles = StyleSheet.create({
\t wrapper: {
\t \t paddingLeft: 6,
\t \t paddingRight: 6,
\t \t paddingTop: 10,
\t \t paddingBottom: 10,
\t \t flex: 1,
\t \t backgroundColor: '#fff'
\t },
\t sideText: {
\t \t width: 25,
\t \t height: 20,
\t \t lineHeight: 20,
\t \t textAlign: 'center'
\t },
\t sideMenu: {
\t \t position: 'absolute',
\t \t right: 0,
\t \t top: 100,
\t \t zIndex: 100,
\t \t backgroundColor: '#eee'
\t },
\t lists: {},
\t listBox: {
\t \t flexDirection: 'row',
\t \t flexWrap: 'wrap'
\t },
\t list: {
\t \t width: (WinWidth - 20)/5,
\t },
\t title: {
\t \t fontSize: 18,
\t \t color: DEFAULT_COLOR,
\t \t paddingTop: 14,
\t \t paddingBottom: 10
\t },
\t text: {
\t \t flex: 1,
\t \t textAlign: 'center',
\t \t paddingTop: 10,
\t \t paddingBottom: 10,
\t }
})
を試すことができますokですが、panResponderMoveはあまりにも遅れているが、それはgenymotionでOKです。 – banli17