Question

我正在尝试制作滑动图像。我遵循了this。它的响应是手指滑动但不会自动滑动。我该怎么办？我已实现如下：

<ViewPager style={styles.viewPager} initialPage={0}>
                <View key="1">
                    <Image  style={ {height: '100%', width:'100%'}}source={{uri :'https://images.unsplash.com/photo-1441742917377-57f78ee0e582?h=1024'}}></Image>
                </View>
                <View key="2">
                <Image  style={ {height: '100%', width:'100%'}}source={{uri :'https://images.unsplash.com/photo-1441716844725-09cedc13a4e7?h=1024'}}></Image>
                </View>
</ViewPager>

Answer 1

通过查看源代码，我发现有一种方法setPage()接受页码作为参数。

看看他们提供的示例代码，您可以在其中找到如何使用引用并调用setPage方法Example

现在您可以使用setInterval()并使自动幻灯片工作了。

setInterval(() => {
  this.viewPager.current.setPage(page);
}, 1000);

Answer 2

设置页面是一种更新viewpager页面的方法。您可以使用计时器自动滚动viewpager，也可以使用setPage方法更新页面。下面是相同的完整代码。

import React, { Component } from 'react';

import { StyleSheet, View, Text, Platform } from 'react-native';

import ViewPager from '@react-native-community/viewpager';

export default class App extends Component {

  state = {
    pageNumber: 0,
    totalPage: 2
  }

  componentDidMount() {
    var pageNumber = 0;
    setInterval(() => {
      if (this.state.pageNumber >= 2) {
        pageNumber = 0;
      } else {
    pageNumber = this.state.pageNumber;
    pageNumber++;
  }
      console.log(pageNumber)
      this.setState({ pageNumber: pageNumber })
      this.viewPager.setPage(pageNumber)
    }, 2000);
  }
  render() {
return (
  <View style={{ flex: 1 }}>
    <ViewPager style={styles.viewPager} initialPage={0}
      ref={(viewPager) => { this.viewPager = viewPager }}
      scrollEnabled={true}>
      <View key="1">
        <Text style={{ color: 'black' }}>First page</Text>
      </View>
      <View key="2">
        <Text>Second page</Text>
      </View>

      <View key="3">
        <Text>Third page</Text>
      </View>
    </ViewPager>
  </View>
    );
      }

}

const styles = StyleSheet.create({

  viewPager: {
    flex: 1,
  },

});

使自动滚动viewpager反应

2 个答案: