[ReactNative] Add warning when using onScroll without throttleScrollCallbackMS

This commit is contained in:
Christopher Chedeau 2015-02-11 18:26:03 -08:00
parent 5aa5e7a875
commit dd78b09741
3 changed files with 37 additions and 16 deletions

View File

@ -20,22 +20,28 @@ exports.examples = [
title: '<ScrollView>', title: '<ScrollView>',
description: 'To make content scrollable, wrap it within a <ScrollView> component', description: 'To make content scrollable, wrap it within a <ScrollView> component',
render: function() { render: function() {
return <ScrollView return (
<ScrollView
onScroll={() => { console.log('onScroll!'); }}
throttleScrollCallbackMS={200}
contentInset={{top: -50}} contentInset={{top: -50}}
style={styles.scrollView}> style={styles.scrollView}>
{THUMBS.map(createThumbRow)} {THUMBS.map(createThumbRow)}
</ScrollView>; </ScrollView>
);
} }
}, { }, {
title: '<ScrollView> (horizontal = true)', title: '<ScrollView> (horizontal = true)',
description: 'You can display <ScrollView>\'s child components horizontally rather than vertically', description: 'You can display <ScrollView>\'s child components horizontally rather than vertically',
render: function() { render: function() {
return <ScrollView return (
<ScrollView
horizontal={true} horizontal={true}
contentInset={{top: -50}} contentInset={{top: -50}}
style={[styles.scrollView, styles.horizontalScrollView]}> style={[styles.scrollView, styles.horizontalScrollView]}>
{THUMBS.map(createThumbRow)} {THUMBS.map(createThumbRow)}
</ScrollView>; </ScrollView>
);
} }
}]; }];

View File

@ -25,6 +25,7 @@ var invariant = require('invariant');
var merge = require('merge'); var merge = require('merge');
var nativePropType = require('nativePropType'); var nativePropType = require('nativePropType');
var validAttributesFromPropTypes = require('validAttributesFromPropTypes'); var validAttributesFromPropTypes = require('validAttributesFromPropTypes');
var warning = require('warning');
var PropTypes = React.PropTypes; var PropTypes = React.PropTypes;
@ -192,6 +193,17 @@ var ScrollView = React.createClass({
') must by applied through the contentContainerStyle prop.' ') must by applied through the contentContainerStyle prop.'
); );
} }
if (__DEV__) {
warning(
this.props.onScroll && !this.props.throttleScrollCallbackMS,
'You specified `onScroll` on a <ScrollView> but not ' +
'`throttleScrollCallbackMS`. You will only receive one event. ' +
'Using `16` you get all the events but be aware that it may cause ' +
'frame drops, use a bigger number if you don\'t need as much ' +
'precision.'
);
}
var contentContainer = var contentContainer =
<View <View
ref={INNERVIEW} ref={INNERVIEW}

View File

@ -35,8 +35,11 @@ Get up and running with our Movies sample app:
1. Once you have the repo cloned and met all the requirements above, start the 1. Once you have the repo cloned and met all the requirements above, start the
packager that will transform your JS code on-the-fly: packager that will transform your JS code on-the-fly:
`npm install`
`npm start` ```
npm install
npm start
```
2. Open the `Examples/Movies/Movies.xcodeproj` project in Xcode. 2. Open the `Examples/Movies/Movies.xcodeproj` project in Xcode.
3. Make sure the target is set to `Movies` and that you have an iOS simulator 3. Make sure the target is set to `Movies` and that you have an iOS simulator
selected to run the app. selected to run the app.
@ -93,27 +96,27 @@ the responder system.
# FAQ # FAQ
Q. How does debugging work? Can I set breakpoints in my JS? ##### Q. How does debugging work? Can I set breakpoints in my JS?
A. We are going to add the ability to use the Chrome developer tools soon. We A. We are going to add the ability to use the Chrome developer tools soon. We
are very passionate about building the best possible developer experience. are very passionate about building the best possible developer experience.
Q. When is this coming to Android/Windows/OS X/etc? ##### Q. When is this coming to Android/Windows/OS X/etc?
A. We're working on Android, and we are excited to release it as soon as we can. A. We're working on Android, and we are excited to release it as soon as we can.
We are looking forward to the community helping us target other platforms as We are looking forward to the community helping us target other platforms as
well :) well :)
Q. How do I create my own app? ##### Q. How do I create my own app?
A. Copy the entire `Examples/TicTacToe` folder, rename stuff in Xcode, and A. Copy the entire `Examples/TicTacToe` folder, rename stuff in Xcode, and
replace the `TicTacToeApp.js` with your own. Then, in `AppDelegate.m`, update replace the `TicTacToeApp.js` with your own. Then, in `AppDelegate.m`, update
`moduleName` to match your call to `moduleName` to match your call to
`Bundler.registerComponent(<moduleName>, <componentName>)` at the bottom of your `Bundler.registerComponent(<moduleName>, <componentName>)` at the bottom of your
JS file, and update `jsCodeLocation` to match your JS file name and location. JS file, and update `jsCodeLocation` to match your JS file name and location.
Q. Can I submit my own React Native app to the App Store? ##### Q. Can I submit my own React Native app to the App Store?
A. Not yet, but you will be able to soon. If you build something you want to A. Not yet, but you will be able to soon. If you build something you want to
submit to the App Store, come talk to us ASAP. submit to the App Store, come talk to us ASAP.
Q. How do I deploy to my device? ##### Q. How do I deploy to my device?
A. You can change `localhost` in `AppDelegate.m` to your laptop's IP address and A. You can change `localhost` in `AppDelegate.m` to your laptop's IP address and
grab the bundle over the same Wi-Fi network. You can also download the bundle grab the bundle over the same Wi-Fi network. You can also download the bundle
that the React packager generates, save it to the file `main.jsbundle`, and add it that the React packager generates, save it to the file `main.jsbundle`, and add it
@ -121,20 +124,20 @@ as a static resource in your Xcode project. Then set the `jsCodeLocation` in
`AppDelegate.m` to point to that file and deploy to your device like you would `AppDelegate.m` to point to that file and deploy to your device like you would
any other app. any other app.
Q. What's up with this private repo? Why aren't you just open sourcing it now? ##### Q. What's up with this private repo? Why aren't you just open sourcing it now?
A. We want input from the React community before we open the floodgates so we A. We want input from the React community before we open the floodgates so we
can incorporate your feedback, and we also have a bunch more features we want to can incorporate your feedback, and we also have a bunch more features we want to
add to make a more complete offering before we open source. add to make a more complete offering before we open source.
Q. Do you have to ship a JS runtime with your apps? ##### Q. Do you have to ship a JS runtime with your apps?
A. No, we just use the JavaScriptCore public API that is part of iOS 7 and A. No, we just use the JavaScriptCore public API that is part of iOS 7 and
later. later.
Q. How do I add more native capabilities? ##### Q. How do I add more native capabilities?
A. React Native is designed to be extensible - come talk to us, we would love to A. React Native is designed to be extensible - come talk to us, we would love to
work with you. work with you.
Q. Can I reuse existing iOS code? ##### Q. Can I reuse existing iOS code?
A. Yes, React Native is designed to be extensible and allow integration of all A. Yes, React Native is designed to be extensible and allow integration of all
sorts of native components, such as `UINavigationController` (available as sorts of native components, such as `UINavigationController` (available as
`<NavigatorIOS>`), `MKMapView` (not available yet), or your own custom `<NavigatorIOS>`), `MKMapView` (not available yet), or your own custom