UIScrollView : paging horizontally, scrolling vertically ?

[osdio]

I just want to know how to set the [UIScrollView : paging horizontally, scrolling vertically], I mean I have a scrollView, and then I set the props 'pagingEnabled' to true. But it working in horizontally, but I don't want the horizontally to be paging.

How can I solve it ?

I have tried this:

I set a nest scrollView, the wrapper one set the pagingEnabled to true, when I scrolling , the inner one don't respond the scrolling , and the wrapper one have respond, How can I let the wrapper one don't handle the scroll event, and let the inner one handle the event?

[ide]

Nested scroll views is the correct approach but unfortunately they don't work very well with React right now (#41).

[osdio]

I just want to know how to solve it ?

[ide]

You could create a native UIPageViewController or native UIScrollView and create a separate RCTRootView (that all share the same RCTBridge) for each screen. I don't think there's a good way to do this with pure React right now. Either you run into issues with nested scroll views or you have to reimplement the scroll physics which was kind of janky in the one example I saw.

[osdio]

ok, I see. It is not easy to finish it . I don't know much about object-c.

[osdio]

I also want to know how to change the scrollView's props like pagingEnabled when scrolling.

[osdio]

I change the ScrollResponder.js at line 137:

    scrollResponderHandleScrollShouldSetResponder: function ():boolean {
        //return this.state.isTouching;
        //return true;
        console.log('debug:');
        console.log(arguments);
        if(this.props.onScrollShouldSetResponder){
            console.log(this.props.onScrollShouldSetResponder(arguments));
            return this.props.onScrollShouldSetResponder(arguments)
        }
        return false;
        //this.props.onScrollShouldSetResponder && this.props.onScrollShouldSetResponder(arguments)
    }

But it doing nothing . It can't prevent the ScrollView to be a responder.

[osdio]

I have solve it .

[christopherdro]

@soliury Great!

Maybe you can share your solution for other people that might come across this!

[osdio]

Just don’t set the contentStyle width and height, so it will work.

在 2015年5月21日，22:50，Christopher Dro [email protected] 写道：

@soliury https://github.com/soliury Great!

Maybe you can share your solution for other people that might come across this!

—
Reply to this email directly or view it on GitHub #1315 (comment).

[osdio]

I am writing a app in react-native, and then I will open the source of app, When the day come, I will put the example to here.

在 2015年5月21日，22:50，Christopher Dro [email protected] 写道：

@soliury https://github.com/soliury Great!

Maybe you can share your solution for other people that might come across this!

—
Reply to this email directly or view it on GitHub #1315 (comment).

[osdio]

The solution is that , don't set the contentContainerStyle with height or width equal the window width or height, it will make the the scrollable content size to window width or window height, so you can not scroll. But nest with two scroll will make the app too slow, and take too much memory.

This is my app writing in react-native, after I finish it, I will open source.

[brentvatne]

@soliury - looks nice! would like to see it when the open source version is available. thanks for the follow up!

[osdio]

@brentvatne I have open source. Just see https://github.com/soliury/noder-react-native, But the code is not clear, I will refactor it soon.

@christopherdro

[brentvatne]

Nice one @soliury!