Question

在升级到React-Native和Expo的最新版本之前，此代码块已起作用。它正在使用的版本为import React, { Component } from 'react'; import { StyleSheet, Text, View, Animated, TouchableOpacity, SafeAreaView, ScrollView } from 'react-native'; export default class App extends React.Component { constructor(props) { super(props); } handleMove = () => { this.scroller.getNode().scrollTo({ x: 200, y: 0, animated: false }); }; render() { return ( <SafeAreaView style={styles.container}> <Text>Open up App.js to start working on your app!</Text> <Animated.ScrollView horizontal ref={scroller => { this.scroller = scroller; }} > <View style={{ height: 100, width: 100, backgroundColor: 'red', margin: 5 }} /> </Animated.ScrollView> <TouchableOpacity onPress={this.handleMove}> <Text>Move</Text> </TouchableOpacity> </SafeAreaView> ); } } const styles = StyleSheet.create({ container: {} });。

我以前能够以编程方式移动Animated.ScrollView的子级，现在不再能够这样做。这是我正在测试的测试代码块。

"dependencies": {
    "expo": "^34.0.1",
    "react": "16.8.3",
    "react-dom": "^16.8.6",
    "react-native": "https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz",
    "react-native-web": "^0.11.4"
  },

升级后，代码块不再适用于最新版本。我正在测试的当前版本是：

browser = webdriver.Firefox(executable_path='C:\\path\\to drivers\\geckodriver.exe')

正确的方法是什么？

我添加了点心来说明我的问题。 ' https://snack.expo.io/@louis345/brave-banana

Answer 1

我可以通过将一个道具添加到scrollView来解决我的问题。 scrollToOverflowEnabled={true}

现在一切正常。我希望这对以后的人有所帮助。

Answer 2

您可以尝试

<Animated.ScrollView // <-- Use the Animated ScrollView wrapper
  scrollEventThrottle={1} // <-- Use 1 here to make sure no events are ever missed
  onScroll={Animated.event(
    [
      {
        nativeEvent: {
          contentOffset: {x: 200,y: 0},
        },
      },
    ],
    {useNativeDriver: true}, // <-- Add this
  )}>
  {content}
</Animated.ScrollView>

Answer 3

从0.57升级到0.60后，我遇到了类似的问题。

似乎安装时间有所变化（在RN版本之间）。我将在几天之内再次检查代码，因为我怀疑自己正在使用一些即将弃用的生命周期函数。他们现在被认为“不安全”使用的事实可能是由于一些计时问题（大胆猜测）。

我通过简单地将scrollTo设置为100ms超时来使代码工作。这表明滚动视图在第一次尝试时尚未完全装入。我对用例的超时确实很满意，但是无论如何我想解决这个问题，因为我不喜欢hacky解决方案。

Answer 4

我可以使用1秒的简单setTimeout来使它正常工作。

这是我的代码现在的样子：

setTimeout(() => {
  this.scrollView.scrollTo({
    x: DEVICE_WIDTH * current_index,
    y: 0,
    animated: false
  });
}, 1)

类似于以上Micheal的建议，这很可能是由于React中不推荐使用的组件WillMount导致安装问题而导致的，而该组件在ScrollView中未正确更新。

React Native的Animated.ScrollView不允许我以编程方式滚动到某个位置

4 个答案: