Question

我在我的本机应用程序中使用Swiper（使用ScrollView）。首先，我需要浏览一个JSON对象列表，以使用map渲染每个幻灯片。我的问题是我不知道如何将当前幻灯片信息设置为状态。只是提到我正在使用redux。

当滚动结束使用onMomentumScrollEnd

时，可能应该实现这一点

以下是代码段

var mySlides = [{id: 1, text: "text 1", sub: "sub 1", image: require("./img/1.jpg")}, {id: 2, text: "text 2", sub: "sub 2", image: require("./img/2.jpg")}, {id: 3, text: "text 3", sub: "sub 3", image: require("./img/3.jpg")}]

export default class extends Component {
  render () {
    return (
      <View>
        <Swiper style={styles.wrapper}
          onMomentumScrollEnd={(e, state, context) => console.log('index:', state.index)}
          >
          {mySlides.map((slide, index) => {
            return (
              <View key="index" style={styles.slide}>
                <Image style={styles.image} source={slide.image}>
                  <View style={styles.backdropView}>
                    <Text style={styles.text}>{slide.text}</Text>
                  </View>
                </Image>
              </View>
            );
          })}
        </Swiper>
      </View>
    )
  }
}

Answer 1

查看了Swiper文档后，我认为您正确使用onMomentumScollEnd来跟踪当前选中的幻灯片。您可以做的是，一旦调用此函数，您可以将state.index（此处为Swiper的状态）存储到组件的状态。然后使用存储的索引来引用幻灯片信息。

例如：

var mySlides = [{id: 1, text: "text 1", sub: "sub 1", image: require("./img/1.jpg")}, {id: 2, text: "text 2", sub: "sub 2", image: require("./img/2.jpg")}, {id: 3, text: "text 3", sub: "sub 3", image: require("./img/3.jpg")}]

export default class extends Component {
  constructor() {
    super();
    this.state = {
      index: 0
    };
  }

  handleOnMomentumScrollEnd(e, state) {
    this.setState({
      index: state.index
    });
  }

  render () {
    // current slide info would be accessed by:
    // const currentSlide = mySlides[this.state.index];
    return (
      <View>
        <Swiper style={styles.wrapper}
          onMomentumScrollEnd={this.handleOnMomentumScrollEnd.bind(this)}
        >
          {mySlides.map((slide, index) => {
            return (
              <View key={index} style={styles.slide}>
                <Image style={styles.image} source={slide.image}>
                  <View style={styles.backdropView}>
                    <Text style={styles.text}>{slide.text}</Text>
                  </View>
                </Image>
              </View>
            );
          })}
        </Swiper>
      </View>
    )
  }
}

另外，作为旁注，您希望将组件的key设置为唯一，以便将key="index"更改为key={index}

React Native将当前幻灯片设置为状态

1 个答案: