Giter Club home page Giter Club logo

Comments (9)

becomingbabyman avatar becomingbabyman commented on July 20, 2024

Went from 1.0.4 to 1.1.1 and that got rid of the error.

Now it just looks like https://github.com/leecade/react-native-swiper/blob/master/dist/index.js#L224 needs to be:

this.props.onMomentumScrollEnd && this.props.onMomentumScrollEnd.call(this, e);

so we can access the event context.

from react-native-swiper.

becomingbabyman avatar becomingbabyman commented on July 20, 2024

Adding the index would be really useful:

this.props.onMomentumScrollEnd && this.props.onMomentumScrollEnd.call(this, e, this.state.index);

from react-native-swiper.

leecade avatar leecade commented on July 20, 2024

cool, you are right, i forget the event param.

from react-native-swiper.

leecade avatar leecade commented on July 20, 2024

New version(1.2.0) fixed this issue, thank you for point this, and maybe get index like this this.state.index is better.

from react-native-swiper.

becomingbabyman avatar becomingbabyman commented on July 20, 2024

@leecade Thanks for the quick fix!

I don't think React wants you to change context between components.

At least it's not working for me.

_onMomentumScrollEnd: function(e) {
  // NOTE: `this` is still set to the context of the component containing Swiper 
  //        and not the Swiper component itself.
  console.log(this.state.index);  // logs `undefined`
},

The React warning: Warning: bind(): React component methods may only be bound to the component instance.

The core team seems to handle callbacks with explicit params and without using call, apply, or bind.

this.props.onMomentumScrollEnd && this.props.onMomentumScrollEnd(e, this);
// NOTE: `this.state.index` works as expected although it seems heavy handed to pass `this`

this.props.onMomentumScrollEnd && this.props.onMomentumScrollEnd(e, this.state.index);
// NOTE: would be ideal

from react-native-swiper.

leecade avatar leecade commented on July 20, 2024

hi @smothers

<Swiper ...
          onMomentumScrollEnd={function(){console.log('this.state.index:', this.state.index)}}
2015-05-02 14:02:51.547 [info][tid:com.facebook.React.JavaScript] "this.state.index:", 1
2015-05-02 14:02:52.629 [info][tid:com.facebook.React.JavaScript] "this.state.index:", 2
2015-05-02 14:02:53.780 [info][tid:com.facebook.React.JavaScript] "this.state.index:", 3
2015-05-02 14:02:54.945 [info][tid:com.facebook.React.JavaScript] "this.state.index:", 0

is this right for you?

And I notice this.setState is async, so I call the onMomentumScrollEnd in setTimeout to ensure synchronous update index.

If there is still a problem, tell me, thanks.

from react-native-swiper.

becomingbabyman avatar becomingbabyman commented on July 20, 2024

@leecade

Returns the index

<Swiper ...
  onMomentumScrollEnd={function(){console.log('this.state.index:', this.state.index)}}

Returns undefined

<Swiper ...
  onMomentumScrollEnd={this._onMomentumScrollEnd}

_onMomentumScrollEnd: function() {
  console.log('this.state.index:', this.state.index)
},

from react-native-swiper.

leecade avatar leecade commented on July 20, 2024

@smothers I fixed this issue.

Now you can get state and this(ref to swiper's context) from params, for example:

var swiper = React.createClass({
  _onMomentumScrollEnd: function (e, state, context) {
    console.log(state, context.state)
  },
  render: function() {
    return (
      <Swiper style={styles.wrapper}
      onMomentumScrollEnd ={this._onMomentumScrollEnd}
     ...
      </Swiper>
    )
  }
})

from react-native-swiper.

becomingbabyman avatar becomingbabyman commented on July 20, 2024

@leecade thanks looks good πŸ†

from react-native-swiper.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.