ScrollView不会跟踪当前位置。轻按后,它会重置回到先前的位置

时间:2019-04-03 01:17:51

标签: reactjs react-native scroll scrollview

问题的步骤: 1:从位置x向下滚动页面 2:页面滚动到位置y 3:松开手指 4:用户再次轻按手指以继续滚动 5:ScrollView上的位置会重置回位置x,从而导致跳回并阻止进一步滚动

我试图查找有关react-native-modal和ScrollView的信息以查找问题,并且找不到任何此类情况

使用中的图书馆:react-native-modal

scrollOffset: 0  
scrollViewRef

handleScrollTo = p => {
  if (this.scrollViewRef) {
    this.scrollViewRef.scrollTo(p);
  }
};

    <Modal
      isVisible={this.state.visibleModal}
      onSwipeComplete={() => this.setState({ visibleModal: false })}
      swipeDirection="down"
      scrollTo={this.handleScrollTo}
      scrollOffset={this.state.scrollOffset}
      scrollOffsetMax={400 - 300} // content height - ScrollView height
      style={screenStyles.bottomModal}
      useNativeDriver
    >
      {this._renderModalContent()}
    </Modal>


      // Render modal content (there's a view wrapping this)
      <ScrollView 
        style ={{flex: 8, paddingLeft: '10%', paddingTop: '10%'}}
        ref={ref => (this.scrollViewRef = ref)}
        onScroll={event => {this.state.scrollOffset = event.nativeEvent.contentOffset.y}}
        scrollEventThrottle={16}>
      >
        {Object.keys(balances).map(
            symbol =>
              symbolPriceTicker[`${symbol}USDT`] &&
              COIN_INFO[symbol] &&  (
                <TouchableOpacity
                  key={`c-${symbol}`}
                  style={screenStyles.assetSelector.selector}
                  onPress={() => this.selectAsset(symbol)}
                >
                  <View style={{flexDirection: 'row'}}>
                    <Image
                      style={screenStyles.assetSelector.coinAvatar}
                      source={COIN_INFO[symbol] ? COIN_INFO[symbol].avatar_32 : null}
                    />
                    <Text style={screenStyles.assetSelector.coinName}>
                      {COIN_INFO[symbol].name}
                    </Text>
                  </View>
                </TouchableOpacity>
              ),
          )}
      </ScrollView>

1 个答案:

答案 0 :(得分:0)

可能是模型中与滚动相关的道具的问题。

ScrollView内使用Model时,假设,您需要一个可关闭的滚动视图

请签出与此相关的示例:https://gist.github.com/mmitchellgarcia/6ee4d5b5c79162e3cc13b67d743777e6#file-dismissablescrollview-js

更多信息:https://github.com/react-native-community/react-native-modal/issues/109

希望有帮助