Permalink
Browse files

Finish v0.1.0

  • Loading branch information...
race604 committed Oct 10, 2015
0 parents commit 12f47832c18677fb73ae7e9b865b4aeff11a41ed
Showing with 2,553 additions and 0 deletions.
  1. +28 −0 .gitignore
  2. +104 −0 DefaultViewPageIndicator.js
  3. +38 −0 README.md
  4. +51 −0 Sample/.flowconfig
  5. +1 −0 Sample/.watchmanconfig
  6. +89 −0 Sample/BottomScreen.js
  7. +36 −0 Sample/MainScreen.js
  8. +66 −0 Sample/TopScreen.js
  9. +1 −0 Sample/android/.gradle/2.4/taskArtifacts/cache.properties
  10. BIN Sample/android/.gradle/2.4/taskArtifacts/cache.properties.lock
  11. BIN Sample/android/.gradle/2.4/taskArtifacts/fileHashes.bin
  12. BIN Sample/android/.gradle/2.4/taskArtifacts/fileSnapshots.bin
  13. BIN Sample/android/.gradle/2.4/taskArtifacts/outputFileStates.bin
  14. BIN Sample/android/.gradle/2.4/taskArtifacts/taskArtifacts.bin
  15. +29 −0 Sample/android/app/build.gradle
  16. +17 −0 Sample/android/app/proguard-rules.pro
  17. +22 −0 Sample/android/app/src/main/AndroidManifest.xml
  18. +78 −0 Sample/android/app/src/main/java/com/rnviewpager/MainActivity.java
  19. BIN Sample/android/app/src/main/res/mipmap-hdpi/ic_launcher.png
  20. BIN Sample/android/app/src/main/res/mipmap-mdpi/ic_launcher.png
  21. BIN Sample/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png
  22. BIN Sample/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png
  23. +3 −0 Sample/android/app/src/main/res/values/strings.xml
  24. +8 −0 Sample/android/app/src/main/res/values/styles.xml
  25. +20 −0 Sample/android/build.gradle
  26. +20 −0 Sample/android/gradle.properties
  27. BIN Sample/android/gradle/wrapper/gradle-wrapper.jar
  28. +5 −0 Sample/android/gradle/wrapper/gradle-wrapper.properties
  29. +164 −0 Sample/android/gradlew
  30. +90 −0 Sample/android/gradlew.bat
  31. +3 −0 Sample/android/settings.gradle
  32. +10 −0 Sample/index.android.js
  33. +10 −0 Sample/index.ios.js
  34. +746 −0 Sample/ios/RNViewPager.xcodeproj/project.pbxproj
  35. +112 −0 Sample/ios/RNViewPager.xcodeproj/xcshareddata/xcschemes/RNViewPager.xcscheme
  36. +16 −0 Sample/ios/RNViewPager/AppDelegate.h
  37. +61 −0 Sample/ios/RNViewPager/AppDelegate.m
  38. +42 −0 Sample/ios/RNViewPager/Base.lproj/LaunchScreen.xib
  39. +38 −0 Sample/ios/RNViewPager/Images.xcassets/AppIcon.appiconset/Contents.json
  40. +48 −0 Sample/ios/RNViewPager/Info.plist
  41. +18 −0 Sample/ios/RNViewPager/main.m
  42. +24 −0 Sample/ios/RNViewPagerTests/Info.plist
  43. +70 −0 Sample/ios/RNViewPagerTests/RNViewPagerTests.m
  44. +8 −0 Sample/ios/main.jsbundle
  45. +12 −0 Sample/package.json
  46. +299 −0 ViewPager.js
  47. +134 −0 ViewPagerDataSource.js
  48. BIN art/anim.gif
  49. BIN art/demo.jpg
  50. +32 −0 package.json
@@ -0,0 +1,28 @@
# OSX
#
.DS_Store
# Xcode
#
build/
*.pbxuser
!default.pbxuser
*.mode1v3
!default.mode1v3
*.mode2v3
!default.mode2v3
*.perspectivev3
!default.perspectivev3
xcuserdata
*.xccheckout
*.moved-aside
DerivedData
*.hmap
*.ipa
*.xcuserstate
project.xcworkspace
# node.js
#
node_modules/
npm-debug.log
@@ -0,0 +1,104 @@
'use strict';
var React = require('react-native');
var {
Dimensions,
StyleSheet,
Text,
TouchableOpacity,
View,
Animated,
} = React;
var deviceWidth = Dimensions.get('window').width;
var DOT_SIZE = 6;
var DOT_SAPCE = 3;
var styles = StyleSheet.create({
tab: {
alignItems: 'center',
},
tabs: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
},
dot: {
width: DOT_SIZE,
height: DOT_SIZE,
borderRadius: DOT_SIZE / 2,
backgroundColor: 'rgba(100,100,100,0.5)',
marginLeft: DOT_SAPCE,
marginRight: DOT_SAPCE,
},
curDot: {
position: 'absolute',
width: DOT_SIZE,
height: DOT_SIZE,
borderRadius: DOT_SIZE / 2,
backgroundColor: 'rgba(250,250,250,0.8)',
margin: DOT_SAPCE,
bottom: 0,
},
});
var DefaultViewPageIndicator = React.createClass({
propTypes: {
goToPage: React.PropTypes.func,
activePage: React.PropTypes.number,
pageCount: React.PropTypes.number
},
getInitialState() {
return {
viewWidth: 0,
};
},
renderIndicator(page) {
//var isTabActive = this.props.activePage === page;
return (
<TouchableOpacity style={styles.tab} key={'idc_' + page} onPress={() => this.props.goToPage(page)}>
<View style={styles.dot} />
</TouchableOpacity>
);
},
render() {
var pageCount = this.props.pageCount;
var itemWidth = DOT_SIZE + (DOT_SAPCE * 2);
var offset = (this.state.viewWidth - itemWidth * pageCount) / 2 + itemWidth * this.props.activePage;
//var left = offset;
var offsetX = itemWidth * (this.props.activePage - this.props.scrollOffset);
var left = this.props.scrollValue.interpolate({
inputRange: [0, 1], outputRange: [offsetX, offsetX + itemWidth]
})
var indicators = [];
for (var i = 0; i < pageCount; i++) {
indicators.push(this.renderIndicator(i))
}
return (
<View style={styles.tabs}
onLayout={(event) => {
var viewWidth = event.nativeEvent.layout.width;
if (!viewWidth || this.state.viewWidth === viewWidth) {
return;
}
this.setState({
viewWidth: viewWidth,
});
}}>
{indicators}
<Animated.View style={[styles.curDot, {left}]} />
</View>
);
},
});
module.exports = DefaultViewPageIndicator;
@@ -0,0 +1,38 @@
# react-native-viewpager
This is the `ViewPager` componnent in React Native both for Android and iOS.
This is a JavaScript-only implementation of pager for React Native. Like `ListView`,
this can render hundreds of pages without performance issue. Better than the one in
Android, this `ViewPager` can **auto play** -- turn page automaticly, **loop** -- make infinite scrolling.
## Demo
![](./art/demo.jpg)
![](./art/anim.gif)
Demo project is [here](./Sample).
## Usage
1. Run `npm install react-native-viewpager --save`
2. Code like this:
```
var ViewPager = require('react-native-viewpager');
<ViewPager
dataSource={this.state.dataSource}
renderPage={this._renderPage}/>
```
## More configuration
* **`dataSource`**: this is require to provide pages data,
* **`renderPage`**: this is require to render page view,
* **`autoPlay`**: `true` to turn page automaticly,
* **`isLoop`**: `true` to run in infinite scroll mode,
* **`locked`**: `true` to disable touch scroll,
* **`onChangePage`**: page change callback,
* **`renderPageIndicator`**: render custom ViewPager indicator.
## Licensed
MIT License
@@ -0,0 +1,51 @@
[ignore]
# We fork some components by platform.
.*/*.web.js
.*/*.android.js
# Some modules have their own node_modules with overlap
.*/node_modules/node-haste/.*
# Ignore react-tools where there are overlaps, but don't ignore anything that
# react-native relies on
.*/node_modules/react-tools/src/React.js
.*/node_modules/react-tools/src/renderers/shared/event/EventPropagators.js
.*/node_modules/react-tools/src/renderers/shared/event/eventPlugins/ResponderEventPlugin.js
.*/node_modules/react-tools/src/shared/vendor/core/ExecutionEnvironment.js
# Ignore commoner tests
.*/node_modules/commoner/test/.*
# See https://github.com/facebook/flow/issues/442
.*/react-tools/node_modules/commoner/lib/reader.js
# Ignore jest
.*/node_modules/jest-cli/.*
# Ignore Website
.*/website/.*
[include]
[libs]
node_modules/react-native/Libraries/react-native/react-native-interface.js
[options]
module.system=haste
munge_underscores=true
module.name_mapper='^image![a-zA-Z0-9$_-]+$' -> 'GlobalImageStub'
module.name_mapper='^[./a-zA-Z0-9$_-]+\.png$' -> 'RelativeImageStub'
suppress_type=$FlowIssue
suppress_type=$FlowFixMe
suppress_type=$FixMe
suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(1[0-6]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(1[0-6]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)? #[0-9]+
suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
[version]
0.16.0
@@ -0,0 +1 @@
{}
@@ -0,0 +1,89 @@
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
Dimensions,
ToastAndroid,
Platform,
AlertIOS,
} = React;
var ViewPager = require('react-native-viewpager');
//var ViewPager = require('./ViewPager');
var deviceWidth = Dimensions.get('window').width;
var PAGES = [
'Page 0',
'Page 1',
'Page 2',
'Page 3',
'Page 4',
];
function notifyMessage(msg: string) {
if (Platform.OS === 'android') {
ToastAndroid.show(msg, ToastAndroid.SHORT)
} else {
AlertIOS.alert(msg);
}
}
var ImagesScreen = React.createClass({
getInitialState: function() {
var dataSource = new ViewPager.DataSource({
pageHasChanged: (p1, p2) => p1 !== p2,
});
return {
dataSource: dataSource.cloneWithPages(PAGES),
};
},
render: function() {
return (
<ViewPager
style={this.props.style}
dataSource={this.state.dataSource}
renderPage={this._renderPage}
onChangePage={this._onChangePage}
isLoop={false}
autoPlay={false}/>
);
},
_renderPage: function(
data: Object,
pageID: number | string,) {
return (
<View style={styles.page}>
<Text style={styles.text}>{data}</Text>
</View>
);
},
_onChangePage: function(
page: number | string
) {
notifyMessage('Current page: ' + page);
},
});
var styles = StyleSheet.create({
page: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
text: {
fontSize: 20,
textAlign: 'center',
},
});
module.exports = ImagesScreen;
@@ -0,0 +1,36 @@
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
View,
} = React;
var TopScreen = require('./TopScreen');
var BottomScreen = require('./BottomScreen');
var MainScreen = React.createClass({
render: function() {
return (
<View style={styles.container}>
<TopScreen style={styles.viewpager}/>
<BottomScreen style={styles.viewpager}/>
</View>
);
},
});
var styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
},
viewpager: {
flex: 1,
},
});
module.exports = MainScreen;
Oops, something went wrong.

0 comments on commit 12f4783

Please sign in to comment.