React native 如何使平面列表自动滚动？

下面是我尝试的，我使用

setInterval

函数设置一个变量

content

将每秒更改一次，我发现

onMomentumScrollEnd

可以在滚动

FlatList

时获得位置

y

然后我被卡住了，我想event.nativeEvent.contentOffset.y=this.state.content可以让我的

FlatList

自动滚动。显然不是

谁能给我一些建议？提前谢谢

我的数据来自API 这是我的App.js：

import React from 'react';
import { View, Image, FlatList, Dimensions } from 'react-native';

const { width, height } = Dimensions.get('window');
const equalWidth = (width / 2 );

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.renderRow = this.renderRow.bind(this);
    this.state = { movies: [], content: 0 };
  }

  componentWillMount() {
    fetch('https://obscure-reaches-65656.herokuapp.com/api?city=Taipei&theater=Centuryasia')
      .then(response => response.json())
      .then(responseData => {
        console.log(responseData);
        this.setState({ movies: responseData[0].movie });
      })
      .catch((error) => console.log(error));

      this.timer = setInterval(() => {
          this.setState({content: this.state.content+1 })
      }, 1000);
  }
  // get the jsonData key is item and set the value name is movie
  renderRow({ item: movie }) {
    console.log('renderRow => ');
    return (
      <View>
        <Image source={{ uri: movie.photoHref}} style={{ height: 220, width: equalWidth }} resizeMode="cover"/>
      </View>
    );
  }

  render() {
    const movies = this.state.movies;
    // it well be rendered every second from setInterval function setState
    console.log('render');
    return (
      <View style={{ flex: 1 }}>
        <FlatList
          data={movies}
          renderItem={this.renderRow}
          horizontal={false}
          keyExtractor={(item, index) => index}
          numColumns={2}
          onMomentumScrollEnd={(event) => {
            console.log(event.nativeEvent.contentOffset.y);
            event.nativeEvent.contentOffset.y = this.state.content;
          }}
        />
      </View>
    );
  }
}

从“React”导入React；
从“react native”导入{视图、图像、平面列表、维度}；
const{width，height}=Dimensions.get（'window'）；
常量相等宽度=（宽度/2）；
导出默认类App扩展React.Component{
建造师（道具）{
超级（道具）；
this.renderRow=this.renderRow.bind（this）；
this.state={movies:[]，content:0}；
}
组件willmount（）{
取（'https://obscure-reaches-65656.herokuapp.com/api?city=Taipei&theater=Centuryasia')
.then（response=>response.json（））
.然后（响应数据=>{
控制台日志（responseData）；
this.setState（{movies:responseData[0].movie}）；
})
.catch（（错误）=>console.log（错误））；
this.timer=setInterval（（）=>{
this.setState（{content:this.state.content+1}）
}, 1000);
}
//获取jsonData键is item并将值name设置为movie
renderRow（{item:movie}）{
log（'renderRow=>'）；
返回(
);
}
render（）{
const movies=this.state.movies；
//它可以从setInterval函数setState每秒渲染一次
console.log（'render'）；
返回(
索引}
numColumns={2}
onMomentumScrollEnd={（事件）=>{
log（event.nativeEvent.contentOffset.y）；
event.nativeEvent.contentOffset.y=this.state.content；
}}
/>
);
}
}

您需要告诉您的平面列表，您希望它使用

scrollToOffset（）

滚动到一个新位置

通过添加道具，在类中存储对平面列表的引用

ref={flatList=>{this.flatList=flatList}}

然后，调用

this.flatList.scrollToOffset（{offset:yourNewOffset}）

滚动到所需的偏移量

---

此方法的文档是。

您需要告诉您的平面列表，您希望它使用

scrollToOffset（）

滚动到一个新位置

通过添加道具，在类中存储对平面列表的引用

ref={flatList=>{this.flatList=flatList}}

然后，调用

this.flatList.scrollToOffset（{offset:yourNewOffset}）

滚动到所需的偏移量

---

关于此方法的文档是。

谢谢您的回复@Jordan，您是否介意告诉我如何调用

此.flatList.scrollToOffset

我不知道如何在flatList下调用它来自动滚动。谢谢。你只需要调用

this.flatList.scrollToOffset（{offset:yourNewOffset}）

在你的

setInterval

中，用你想要滚动的像素数替换

yourNewOffset

。谢谢你的回复@Jordan，请告诉我如何调用

这个.flatList.scrollToOffset

我不知道如何在flatList下调用它来自动滚动。谢谢。您只需调用

this.flatList.scrollToOffset（{offset:yourNewOffset}）

在

setInterval

中，将

yourNewOffset

替换为您想要滚动的像素数。