如何在 React Native 中为滚动设置动画

Question

我在水平滚动ListView 中有一堆数据（在 ReactNative 应用程序中）。我想在大约 3 分钟的时间内滚动文本（这不仅仅是弹跳或事件）。我找不到任何如何做到这一点的例子。 ListView.scrollTo() 函数似乎很合适，但它不允许这种受控的渐变滚动。另外，如果可能的话，我很想使用原生动画，所以也许是transform？

export default class App extends React.Component {
  // Initialize the hardcoded data
  constructor(props) {
    super(props);
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows([
        'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin',
        'Daryl', 'Donny', 'Frederick', 'Fanny', 'Fanulf', 'Gordon'
      ])
    };
  }
  render() {
    return (
      <View style={styles.container}>
        <ListView
          horizontal={true}
          style={styles.content}
          dataSource={this.state.dataSource}
          renderRow={(rowData) => <Text>{rowData}</Text>}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF'
  },
  content: {
    flex: 1,
    padding: 5
  }
});

Answer 1

您可以为此使用 Animated api。获取滚动视图的总内容大小，然后在动画值间隔中使用 scrollTo 滚动视图。您的代码将与此类似。

    export defaul class App extends React.Component {
  // Initialize the hardcoded data
  constructor(props) {
    super(props);
    this._contentWidth = 0;
    this.animatedValue = new Animated.Value(0);

    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows([
        'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin',
        'Daryl', 'Donny', 'Frederick', 'Fanny', 'Fanulf', 'Gordon',
        'Daryl', 'Donny', 'Frederick', 'Fanny', 'Fanulf', 'Gordon',
        'Daryl', 'Donny', 'Frederick', 'Fanny', 'Fanulf', 'Gordon',
        'Daryl', 'Donny', 'Frederick', 'Fanny', 'Fanulf', 'Gordon',
        'Daryl', 'Donny', 'Frederick', 'Fanny', 'Fanulf', 'Gordon',
        'Daryl', 'Donny', 'Frederick', 'Fanny', 'Fanulf', 'Gordon',
        'Daryl', 'Donny', 'Frederick', 'Fanny', 'Fanulf', 'Gordon',

      ])
    };
  }

  componentWillMount() {

    let self = this;

    this.animatedListenerId = this.animatedValue.addListener(
      ({value}) => {
        console.log("VALUE: ", value)
        this.refs.listview.scrollTo({x: (self._contentWidth/180)*value, y:0, animated: false})
      });

    Animated.timing(this.animatedValue, {
      toValue: 180,
      duration: 180*1000,
      easing: Easing.linear
    }).start();
  }

  render() {
    return (
      <View style={styles.container}>
        <ListView
          ref='listview'
          horizontal={true}
          style={styles.content}
          dataSource={this.state.dataSource}
          onContentSizeChange = {( contentWidth, contentHeight ) => {
            this._contentWidth = contentWidth
          }}
          renderRow={(rowData) => <Text>{rowData}</Text>}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF'
  },
  content: {
    flex: 1,
    padding: 5
  }
});