83 lines
2.0 KiB
JavaScript
83 lines
2.0 KiB
JavaScript
|
/**
|
||
|
|
* The examples provided by Facebook are for non-commercial testing and
|
||
|
|
* evaluation purposes only.
|
||
|
|
*
|
||
|
|
* Facebook reserves all rights not expressly granted.
|
||
|
|
*
|
||
|
|
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
|
||
|
|
* OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||
|
|
* FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
|
||
|
|
* FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
|
||
|
|
* AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
||
|
|
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||
|
|
*
|
||
|
|
* @flow
|
||
|
|
*/
|
||
|
|
'use strict';
|
||
|
|
|
||
|
|
var React = require('react-native');
|
||
|
|
var {
|
||
|
|
ScrollView,
|
||
|
|
StyleSheet,
|
||
|
|
Text,
|
||
|
|
TouchableOpacity
|
||
|
|
} = React;
|
||
|
|
|
||
|
|
var NUM_ITEMS = 20;
|
||
|
|
|
||
|
|
var ScrollViewSimpleExample = React.createClass({
|
||
|
|
statics: {
|
||
|
|
title: '<ScrollView>',
|
||
|
|
description: 'Component that enables scrolling through child components.'
|
||
|
|
},
|
||
|
|
makeItems: function(nItems, styles) {
|
||
|
|
var items = [];
|
||
|
|
for (var i = 0; i < nItems; i++) {
|
||
|
|
items[i] = (
|
||
|
|
<TouchableOpacity key={i} style={styles}>
|
||
|
|
<Text>{'Item ' + i}</Text>
|
||
|
|
</TouchableOpacity>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
return items;
|
||
|
|
},
|
||
|
|
|
||
|
|
render: function() {
|
||
|
|
// One of the items is a horizontal scroll view
|
||
|
|
var items = this.makeItems(NUM_ITEMS, styles.itemWrapper);
|
||
|
|
items[4] = (
|
||
|
|
<ScrollView key={'scrollView'} horizontal={true}>
|
||
|
|
{this.makeItems(NUM_ITEMS, [styles.itemWrapper, styles.horizontalItemWrapper])}
|
||
|
|
</ScrollView>
|
||
|
|
);
|
||
|
|
|
||
|
|
var verticalScrollView = (
|
||
|
|
<ScrollView style={styles.verticalScrollView}>
|
||
|
|
{items}
|
||
|
|
</ScrollView>
|
||
|
|
);
|
||
|
|
|
||
|
|
return verticalScrollView;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
var styles = StyleSheet.create({
|
||
|
|
verticalScrollView: {
|
||
|
|
margin: 10,
|
||
|
|
},
|
||
|
|
itemWrapper: {
|
||
|
|
backgroundColor: '#dddddd',
|
||
|
|
alignItems: 'center',
|
||
|
|
borderRadius: 5,
|
||
|
|
borderWidth: 5,
|
||
|
|
borderColor: '#a52a2a',
|
||
|
|
padding: 30,
|
||
|
|
margin: 5,
|
||
|
|
},
|
||
|
|
horizontalItemWrapper: {
|
||
|
|
padding: 50
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
module.exports = ScrollViewSimpleExample;
|