mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Re-license and rename UIExplorer integration test app as RNTester
Reviewed By: yungsters Differential Revision: D4950085 fbshipit-source-id: 44574b5d0ef0d2ad5dfc714309b18dc69cbad9ff
This commit is contained in:
Eric Vicenti
committed by
Facebook Github Bot
Facebook Github Bot
parent
82c4b9f0b7
commit
4a80dceac7
@@ -0,0 +1,268 @@
|
||||
/**
|
||||
* Copyright (c) 2015-present, Facebook, Inc.
|
||||
* All rights reserved.
|
||||
*
|
||||
* This source code is licensed under the BSD-style license found in the
|
||||
* LICENSE file in the root directory of this source tree. An additional grant
|
||||
* of patent rights can be found in the PATENTS file in the same directory.
|
||||
*
|
||||
* @providesModule ViewPagerAndroidExample
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
var React = require('react');
|
||||
var ReactNative = require('react-native');
|
||||
var {
|
||||
Image,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TouchableWithoutFeedback,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
ViewPagerAndroid,
|
||||
} = ReactNative;
|
||||
|
||||
import type { ViewPagerScrollState } from 'ViewPagerAndroid';
|
||||
|
||||
var PAGES = 5;
|
||||
var BGCOLOR = ['#fdc08e', '#fff6b9', '#99d1b7', '#dde5fe', '#f79273'];
|
||||
var IMAGE_URIS = [
|
||||
'https://apod.nasa.gov/apod/image/1410/20141008tleBaldridge001h990.jpg',
|
||||
'https://apod.nasa.gov/apod/image/1409/volcanicpillar_vetter_960.jpg',
|
||||
'https://apod.nasa.gov/apod/image/1409/m27_snyder_960.jpg',
|
||||
'https://apod.nasa.gov/apod/image/1409/PupAmulti_rot0.jpg',
|
||||
'https://apod.nasa.gov/apod/image/1510/lunareclipse_27Sep_beletskycrop4.jpg',
|
||||
];
|
||||
|
||||
class LikeCount extends React.Component {
|
||||
state = {
|
||||
likes: 7,
|
||||
};
|
||||
|
||||
onClick = () => {
|
||||
this.setState({likes: this.state.likes + 1});
|
||||
};
|
||||
|
||||
render() {
|
||||
var thumbsUp = '\uD83D\uDC4D';
|
||||
return (
|
||||
<View style={styles.likeContainer}>
|
||||
<TouchableOpacity onPress={this.onClick} style={styles.likeButton}>
|
||||
<Text style={styles.likesText}>
|
||||
{thumbsUp + ' Like'}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
<Text style={styles.likesText}>
|
||||
{this.state.likes + ' likes'}
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class Button extends React.Component {
|
||||
_handlePress = () => {
|
||||
if (this.props.enabled && this.props.onPress) {
|
||||
this.props.onPress();
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<TouchableWithoutFeedback onPress={this._handlePress}>
|
||||
<View style={[styles.button, this.props.enabled ? {} : styles.buttonDisabled]}>
|
||||
<Text style={styles.buttonText}>{this.props.text}</Text>
|
||||
</View>
|
||||
</TouchableWithoutFeedback>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class ProgressBar extends React.Component {
|
||||
render() {
|
||||
var fractionalPosition = (this.props.progress.position + this.props.progress.offset);
|
||||
var progressBarSize = (fractionalPosition / (PAGES - 1)) * this.props.size;
|
||||
return (
|
||||
<View style={[styles.progressBarContainer, {width: this.props.size}]}>
|
||||
<View style={[styles.progressBar, {width: progressBarSize}]}/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class ViewPagerAndroidExample extends React.Component {
|
||||
static title = '<ViewPagerAndroid>';
|
||||
static description = 'Container that allows to flip left and right between child views.';
|
||||
|
||||
state = {
|
||||
page: 0,
|
||||
animationsAreEnabled: true,
|
||||
scrollEnabled: true,
|
||||
progress: {
|
||||
position: 0,
|
||||
offset: 0,
|
||||
},
|
||||
};
|
||||
|
||||
onPageSelected = (e) => {
|
||||
this.setState({page: e.nativeEvent.position});
|
||||
};
|
||||
|
||||
onPageScroll = (e) => {
|
||||
this.setState({progress: e.nativeEvent});
|
||||
};
|
||||
|
||||
onPageScrollStateChanged = (state : ViewPagerScrollState) => {
|
||||
this.setState({scrollState: state});
|
||||
};
|
||||
|
||||
move = (delta) => {
|
||||
var page = this.state.page + delta;
|
||||
this.go(page);
|
||||
};
|
||||
|
||||
go = (page) => {
|
||||
if (this.state.animationsAreEnabled) {
|
||||
this.viewPager.setPage(page);
|
||||
} else {
|
||||
this.viewPager.setPageWithoutAnimation(page);
|
||||
}
|
||||
|
||||
this.setState({page});
|
||||
};
|
||||
|
||||
render() {
|
||||
var pages = [];
|
||||
for (var i = 0; i < PAGES; i++) {
|
||||
var pageStyle = {
|
||||
backgroundColor: BGCOLOR[i % BGCOLOR.length],
|
||||
alignItems: 'center',
|
||||
padding: 20,
|
||||
};
|
||||
pages.push(
|
||||
<View key={i} style={pageStyle} collapsable={false}>
|
||||
<Image
|
||||
style={styles.image}
|
||||
source={{uri: IMAGE_URIS[i % BGCOLOR.length]}}
|
||||
/>
|
||||
<LikeCount />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
var { page, animationsAreEnabled } = this.state;
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<ViewPagerAndroid
|
||||
style={styles.viewPager}
|
||||
initialPage={0}
|
||||
scrollEnabled={this.state.scrollEnabled}
|
||||
onPageScroll={this.onPageScroll}
|
||||
onPageSelected={this.onPageSelected}
|
||||
onPageScrollStateChanged={this.onPageScrollStateChanged}
|
||||
pageMargin={10}
|
||||
ref={viewPager => { this.viewPager = viewPager; }}>
|
||||
{pages}
|
||||
</ViewPagerAndroid>
|
||||
<View style={styles.buttons}>
|
||||
<Button
|
||||
enabled={true}
|
||||
text={this.state.scrollEnabled ? 'Scroll Enabled' : 'Scroll Disabled'}
|
||||
onPress={() => this.setState({scrollEnabled: !this.state.scrollEnabled})}
|
||||
/>
|
||||
</View>
|
||||
<View style={styles.buttons}>
|
||||
{ animationsAreEnabled ?
|
||||
<Button
|
||||
text="Turn off animations"
|
||||
enabled={true}
|
||||
onPress={() => this.setState({animationsAreEnabled: false})}
|
||||
/> :
|
||||
<Button
|
||||
text="Turn animations back on"
|
||||
enabled={true}
|
||||
onPress={() => this.setState({animationsAreEnabled: true})}
|
||||
/> }
|
||||
<Text style={styles.scrollStateText}>ScrollState[ {this.state.scrollState} ]</Text>
|
||||
</View>
|
||||
<View style={styles.buttons}>
|
||||
<Button text="Start" enabled={page > 0} onPress={() => this.go(0)}/>
|
||||
<Button text="Prev" enabled={page > 0} onPress={() => this.move(-1)}/>
|
||||
<Text style={styles.buttonText}>Page {page + 1} / {PAGES}</Text>
|
||||
<ProgressBar size={100} progress={this.state.progress}/>
|
||||
<Button text="Next" enabled={page < PAGES - 1} onPress={() => this.move(1)}/>
|
||||
<Button text="Last" enabled={page < PAGES - 1} onPress={() => this.go(PAGES - 1)}/>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
var styles = StyleSheet.create({
|
||||
buttons: {
|
||||
flexDirection: 'row',
|
||||
height: 30,
|
||||
backgroundColor: 'black',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
},
|
||||
button: {
|
||||
flex: 1,
|
||||
width: 0,
|
||||
margin: 5,
|
||||
borderColor: 'gray',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'gray',
|
||||
},
|
||||
buttonDisabled: {
|
||||
backgroundColor: 'black',
|
||||
opacity: 0.5,
|
||||
},
|
||||
buttonText: {
|
||||
color: 'white',
|
||||
},
|
||||
scrollStateText: {
|
||||
color: '#99d1b7',
|
||||
},
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: 'white',
|
||||
},
|
||||
image: {
|
||||
width: 300,
|
||||
height: 200,
|
||||
padding: 20,
|
||||
},
|
||||
likeButton: {
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.1)',
|
||||
borderColor: '#333333',
|
||||
borderWidth: 1,
|
||||
borderRadius: 5,
|
||||
flex: 1,
|
||||
margin: 8,
|
||||
padding: 8,
|
||||
},
|
||||
likeContainer: {
|
||||
flexDirection: 'row',
|
||||
},
|
||||
likesText: {
|
||||
flex: 1,
|
||||
fontSize: 18,
|
||||
alignSelf: 'center',
|
||||
},
|
||||
progressBarContainer: {
|
||||
height: 10,
|
||||
margin: 10,
|
||||
borderColor: '#eeeeee',
|
||||
borderWidth: 2,
|
||||
},
|
||||
progressBar: {
|
||||
alignSelf: 'flex-start',
|
||||
flex: 1,
|
||||
backgroundColor: '#eeeeee',
|
||||
},
|
||||
viewPager: {
|
||||
flex: 1,
|
||||
},
|
||||
});
|
||||
|
||||
module.exports = ViewPagerAndroidExample;
|
||||
Reference in New Issue
Block a user