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

Question

我在我的 React 本机应用程序中使用 Swiper（它正在使用 ScrollView）。首先，我需要浏览 JSON 对象的列表，以使用地图呈现每张幻灯片。我的问题是我不确定如何将当前幻灯片信息设置为状态。顺便提一下，我正在使用 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 将当前幻灯片设置为状态

React Native set the current slide to state

reactjs

react-native

react-redux