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

我在一个水平滚动的

ListView

（在一个ReactNative应用程序中）中有一堆数据。我想在大约3分钟的过程中滚动文本（这不仅仅是反弹或事件）。我找不到任何关于如何做这件事的例子。

ListView.scrollTo（）

函数似乎是最合适的，但它不允许这样一个受控的渐进滚动。另外，如果可能的话，我很想使用本地动画，所以可能是

变换

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
  }
});

导出默认类App扩展React.Component{
//初始化硬编码数据
建造师（道具）{
超级（道具）；
const ds=new ListView.DataSource（{rowHasChanged:（r1，r2）=>r1！==r2}）；
此.state={
数据源：ds.cloneWithRows([
‘约翰’、‘乔尔’、‘詹姆斯’、‘吉米’、‘杰克逊’、‘吉利安’、‘朱莉’、‘德文’，
“Daryl”、“Donny”、“Frederick”、“Fanny”、“Fanulf”、“Gordon”
])
};
}
render（）{
返回(
{rowData}}
/>
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“#F5FCFF”
},
内容：{
弹性：1，
填充：5
}
});

您可以为此使用动画api。获取scrollview的总内容大小，然后以动画值间隔使用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
  }
});

导出defaul类应用程序扩展React.Component{
//初始化硬编码数据
建造师（道具）{
超级（道具）；
这是。_contentWidth=0；
this.animatedValue=新的Animated.Value（0）；
const ds=new ListView.DataSource（{rowHasChanged:（r1，r2）=>r1！==r2}）；
此.state={
数据源：ds.cloneWithRows([
‘约翰’、‘乔尔’、‘詹姆斯’、‘吉米’、‘杰克逊’、‘吉利安’、‘朱莉’、‘德文’，
“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”，
])
};
}
组件willmount（）{
让自我=这个；
this.animatedListenerId=this.animatedValue.addListener(
（{value}）=>{
log（“值：”，值）
this.refs.listview.scrollTo（{x:（self.\u contentWidth/180）*值，y:0，动画：false}）
});
动画.计时（此.animatedValue{
toValue:180，
持续时间：180*1000，
放松：放松。线性
}).start（）；
}
render（）{
返回(
{
这是。_contentWidth=contentWidth
}}
renderRow={（rowData）=>{rowData}}
/>
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“#F5FCFF”
},
内容：{
弹性：1，
填充：5
}
});

以透明度转换的实时视图为例：