diff --git a/.gitignore b/.gitignore index ec720bc..236fc3d 100644 --- a/.gitignore +++ b/.gitignore @@ -13,6 +13,15 @@ build/ !default.mode2v3 *.perspectivev3 !default.perspectivev3 +xcuserdata/ + +## Other +*.xcscmblueprint + +*.log + +.vscode/ + xcuserdata *.xccheckout *.moved-aside @@ -57,4 +66,4 @@ buck-out/ *.jsbundle # CocoaPods -/ios/Pods/ +/ios/Pods/ \ No newline at end of file diff --git a/LICENSE b/LICENSE deleted file mode 100644 index c484896..0000000 --- a/LICENSE +++ /dev/null @@ -1,21 +0,0 @@ -MIT License - -Copyright (c) 2018 石破天惊 - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -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 NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS 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. diff --git a/android/app/build.gradle b/android/app/build.gradle index c820c96..78f0e19 100644 --- a/android/app/build.gradle +++ b/android/app/build.gradle @@ -186,7 +186,7 @@ android { dependencies { implementation fileTree(dir: "libs", include: ["*.jar"]) //noinspection GradleDynamicVersion - implementation "com.facebook.react:react-native:+" // From node_modules + implementation "com.facebook.react:react-native:0.65.1" // From node_modules api project(':lottie-react-native') api project(':react-native-spring-scroll-view') diff --git a/android/build.gradle b/android/build.gradle index 6977fd4..6bdb271 100644 --- a/android/build.gradle +++ b/android/build.gradle @@ -1,38 +1,53 @@ -// Top-level build file where you can add configuration options common to all sub-projects/modules. - buildscript { - ext { - buildToolsVersion = "29.0.3" - minSdkVersion = 21 - compileSdkVersion = 29 - targetSdkVersion = 29 - ndkVersion = "20.1.5948944" - } repositories { google() jcenter() + mavenCentral() + maven { url 'http://nexus.skillz.com/content/groups/public' } } + dependencies { - classpath('com.android.tools.build:gradle:4.1.1') - // NOTE: Do not place your application dependencies here; they belong - // in the individual module build.gradle files + classpath 'com.android.tools.build:gradle:3.6.4' + classpath 'de.undercouch:gradle-download-task:3.4.3' + classpath 'com.google.gms:google-services:4.3.0' + classpath 'com.github.dcendents:android-maven-gradle-plugin:2.1' } } -allprojects { - repositories { - mavenLocal() - maven { - // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm - url("$rootDir/../node_modules/react-native/android") - } - maven { - // Android JSC is installed from npm - url("$rootDir/../node_modules/jsc-android/dist") - } +apply plugin: 'com.android.library' - google() - jcenter() - maven { url 'https://www.jitpack.io' } +android { + compileSdkVersion 29 + buildToolsVersion '29.0.0' + + defaultConfig { + minSdkVersion 19 + targetSdkVersion 29 + versionCode 1 + versionName VERSION_NAME + } + lintOptions { + abortOnError false } + compileOptions { + sourceCompatibility JavaVersion.VERSION_1_8 + targetCompatibility JavaVersion.VERSION_1_8 + } +} + +repositories { + google() + mavenCentral() + maven { + url 'http://nexus.skillz.com/content/groups/public' + } + + jcenter() + flatDir { dirs 'libs', '../../node_modules' } +} + +dependencies { + implementation 'com.facebook.react:react-native:0.65.1' // Skillz' react-native-v8 aar } + +apply from: 'release.gradle' \ No newline at end of file diff --git a/android/gradle.properties b/android/gradle.properties index d21d03f..f62489b 100644 --- a/android/gradle.properties +++ b/android/gradle.properties @@ -26,3 +26,11 @@ android.enableJetifier=true # Version of flipper SDK to use with React Native FLIPPER_VERSION=0.75.1 + +VERSION_NAME=3.0.2-skillz +MOCKITO_CORE_VERSION=1.+ +POWERMOCK_VERSION=1.6.2 +GROUP=com.bolan9999 +POM_NAME=ReactNativeSpringScrollview +POM_ARTIFACT_ID=react-native-spring-scrollview-android +POM_PACKAGING=aar \ No newline at end of file diff --git a/android/release.gradle b/android/release.gradle new file mode 100644 index 0000000..98a84da --- /dev/null +++ b/android/release.gradle @@ -0,0 +1,100 @@ +apply plugin: 'com.github.dcendents.android-maven' +apply plugin: 'signing' + +def configureReactNativePom(def pom) { + pom.artifactId = POM_ARTIFACT_ID + pom.name = GROUP + pom.packaging = POM_PACKAGING + pom.version = VERSION_NAME + pom.groupId = "com.react-native-spring-scrollview" + archivesBaseName='react-native-spring-scrollview-android' + + pom.project { + name POM_NAME + + description 'A high performance cross-platform native bounces ScrollView for React Native.' + url 'https://github.com/skillz/react-native-spring-scrollview' + + scm { + url 'https://github.com/skillz/react-native-spring-scrollview.git' + connection 'scm:git:https://github.com/skillz/react-native-spring-scrollview.git' + developerConnection 'scm:git:git@github.com/skillz/react-native-spring-scrollview.git' + } + + licenses { + license { + name 'Proprietary' + distribution 'repo' + } + } + + developers { + developer { + id 'skillz' + name 'Skillz' + } + } + } +} + +afterEvaluate { project -> + + task androidSourcesJar(type: Jar) { + classifier = 'sources' + from android.sourceSets.main.java.srcDirs + include '**/*.java' + } + + task renameArchive(type: Copy) { + dependsOn 'assembleRelease' + from('build/outputs/aar') + into('build/outputs/aar') + include('android-release.aar') + rename ('android-release.aar', + 'react-native-spring-scroll-view-release.aar') + } + + android.libraryVariants.all { variant -> + def name = variant.name.capitalize() + task "jar${name}"(type: Jar, dependsOn: variant.javaCompile) { + from variant.javaCompile.destinationDir + } + } + + version = VERSION_NAME + group = GROUP + + signing { + required { gradle.taskGraph.hasTask('uploadArchives') } + + sign configurations.archives + } + + uploadArchives { + configuration = configurations.archives + + repositories.mavenDeployer { + beforeDeployment { + MavenDeployment deployment -> signing.signPom(deployment) + } + + repository(url: 'http://nexus.skillz.com/content/repositories/thirdparty/') { + authentication(userName: "garbage", password: "garbage") + } + + configureReactNativePom pom + } + } + + task installArchives(type: Upload) { + configuration = configurations.archives + + repositories.mavenDeployer { + + repository url: "file://${projectDir}/../android" + + configureReactNativePom pom + + } + } +} \ No newline at end of file diff --git a/android/settings.gradle b/android/settings.gradle index 88cc02b..c7d5692 100644 --- a/android/settings.gradle +++ b/android/settings.gradle @@ -1,9 +1,4 @@ -rootProject.name = 'SSVExample' +rootProject.name = 'react-native-spring-scroll-view' -include ':lottie-react-native' -project(':lottie-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/lottie-react-native/src/android') include ':react-native-spring-scroll-view' -project(':react-native-spring-scroll-view').projectDir = new File(rootProject.projectDir, '../src/android') - -apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings) -include ':app' +project(':react-native-spring-scroll-view').projectDir = new File(rootProject.projectDir, '../src/android') \ No newline at end of file diff --git a/android/src/main/AndroidManifest.xml b/android/src/main/AndroidManifest.xml new file mode 100644 index 0000000..f54f77e --- /dev/null +++ b/android/src/main/AndroidManifest.xml @@ -0,0 +1,6 @@ + + + + + \ No newline at end of file diff --git a/src/android/src/main/java/com/bolan9999/DecelerateAnimation.java b/android/src/main/java/com/bolan9999/DecelerateAnimation.java similarity index 100% rename from src/android/src/main/java/com/bolan9999/DecelerateAnimation.java rename to android/src/main/java/com/bolan9999/DecelerateAnimation.java diff --git a/src/android/src/main/java/com/bolan9999/ScrollEvent.java b/android/src/main/java/com/bolan9999/ScrollEvent.java similarity index 100% rename from src/android/src/main/java/com/bolan9999/ScrollEvent.java rename to android/src/main/java/com/bolan9999/ScrollEvent.java diff --git a/src/android/src/main/java/com/bolan9999/SpringScrollView.java b/android/src/main/java/com/bolan9999/SpringScrollView.java similarity index 99% rename from src/android/src/main/java/com/bolan9999/SpringScrollView.java rename to android/src/main/java/com/bolan9999/SpringScrollView.java index 41879dd..706e8b0 100644 --- a/src/android/src/main/java/com/bolan9999/SpringScrollView.java +++ b/android/src/main/java/com/bolan9999/SpringScrollView.java @@ -10,6 +10,7 @@ import com.facebook.react.bridge.Arguments; import com.facebook.react.bridge.ReactContext; +import com.facebook.react.bridge.ReadableMap; import com.facebook.react.bridge.WritableMap; import com.facebook.react.uimanager.PixelUtil; import com.facebook.react.uimanager.UIManagerModule; @@ -369,7 +370,7 @@ public void setContentOffset(float x, float y) { WritableMap contentOffsetMap = Arguments.createMap(); contentOffsetMap.putDouble("x", PixelUtil.toDIPFromPixel(contentOffset.x)); contentOffsetMap.putDouble("y", PixelUtil.toDIPFromPixel(contentOffset.y)); - event.putMap("contentOffset", contentOffsetMap); + event.putMap("contentOffset", (ReadableMap)contentOffsetMap); event.putString("refreshStatus", refreshStatus); event.putString("loadingStatus", loadingStatus); sendOnScrollEvent(event); diff --git a/src/android/src/main/java/com/bolan9999/SpringScrollViewManager.java b/android/src/main/java/com/bolan9999/SpringScrollViewManager.java similarity index 100% rename from src/android/src/main/java/com/bolan9999/SpringScrollViewManager.java rename to android/src/main/java/com/bolan9999/SpringScrollViewManager.java diff --git a/src/android/src/main/java/com/bolan9999/SpringScrollViewPackage.java b/android/src/main/java/com/bolan9999/SpringScrollViewPackage.java similarity index 100% rename from src/android/src/main/java/com/bolan9999/SpringScrollViewPackage.java rename to android/src/main/java/com/bolan9999/SpringScrollViewPackage.java diff --git a/src/android/src/main/java/com/bolan9999/Types.java b/android/src/main/java/com/bolan9999/Types.java similarity index 100% rename from src/android/src/main/java/com/bolan9999/Types.java rename to android/src/main/java/com/bolan9999/Types.java diff --git a/docs/.nojekyll b/docs/.nojekyll deleted file mode 100644 index e69de29..0000000 diff --git a/docs/_coverpage.md b/docs/_coverpage.md deleted file mode 100644 index 1a23457..0000000 --- a/docs/_coverpage.md +++ /dev/null @@ -1,8 +0,0 @@ -# React Native Spring Scrollview - -> A cross-platform bounce ScrollView for React Native. - -[github](https://github.com/bolan9999/react-native-spring-scrollview) -[Get Started](en/) -[中文文档](zh-cn/) - diff --git a/docs/_navbar.md b/docs/_navbar.md deleted file mode 100644 index de18c09..0000000 --- a/docs/_navbar.md +++ /dev/null @@ -1,3 +0,0 @@ - -* [English](/en/) -* [简体中文](/zh-cn/) diff --git a/docs/en/V2/BasicContent.md b/docs/en/V2/BasicContent.md deleted file mode 100644 index 62b3778..0000000 --- a/docs/en/V2/BasicContent.md +++ /dev/null @@ -1,16 +0,0 @@ -### Overview - -SpringScrollView is a high performance cross-platform native bounces ScrollView for React Native.(iOS & Android). It is same as the ScrollView from React-Native, SpringScrollView simply renders all its react child components at once. That makes it very easy to understand and use. If you need a high-performance reused large list component , maybe [LargeList](https://bolan9999.github.io/react-native-largelist/#/) is a good choice. - -Keep in mind that SpringScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. SpringScrollViews default have a `{flex:1}` style, please be sure its parent has abounded height. - -### style & contentStyle - -As the ScrollView in React-Native, SpringScrollView consists of a wrapper and a content view. The `style` configure the wrapper's style and the `contentStyle` configure the content view's style. The style prop has a `{flex:1}` and the `contentStyle` has a `{flexDirection:"column",justifyContent:"stretch"}` default property. It is different from the official ScrollView. And you can override them. Note that `contentStyle` should not contain a `transform` props. - -Props | Type | Default |  description   ----- | ------ | --------- | -------- -style | Animated.[ViewStyle](http://facebook.github.io/react-native/docs/view-style-props) | {flex:1} | The wrapper style of the SpringScrollView. It supports Animated style. -contentStyle | [ViewStyle](http://facebook.github.io/react-native/docs/view-style-props) | - | The content view style of the SpringScrollView. - -**Precautions:** SpringScrollViews support both horizontal and vertical directions scroll after Version 2 . If the content view is wider than the wrapper, horizontal scroll and bounces will be enabled. ContentStyle supports `{width:"200%"}` or `width:1000` style and so on. diff --git a/docs/en/V2/BasicControl.md b/docs/en/V2/BasicControl.md deleted file mode 100644 index c8a3e7f..0000000 --- a/docs/en/V2/BasicControl.md +++ /dev/null @@ -1,18 +0,0 @@ -# Basic Props - - -Props | Type | Default |  description   ----- | ------ | --------- | -------- -...ViewProps | - | | All props of [View](http://facebook.github.io/react-native/docs/view) -bounces | boolean | true | Bounces if the content offset is out of the content view. It won't be bounces on the horizontal direction if the content view is not wider than the wrapper view although bounces is true. But it will on the vertical direction. -contentStyle | ViewStyle | undefined | The style of the content view. -scrollEnabled | boolean | true | scrollEnabled -directionalLockEnabled | boolean | false | When true, the SpringScrollView will try to lock to only vertical or horizontal scrolling while dragging. -initialContentOffset | {x:number, y:number} | undefined | initial content offset. Only works when initiation. -showsVerticalScrollIndicator | boolean | true | showsVerticalScrollIndicator -showsHorizontalScrollIndicator | boolean | true | showsHorizontalScrollIndicator -tapToHideKeyboard | boolean | true | tapToHideKeyboard -onSizeChange | ({width:number,height:number})=>any | undefined | The callback when the wrapper view size changed. -onContentSizeChange | ({width:number,height:number})=>any | undefined | The callback when the content view size changed. -inverted | boolean | false | inverted. It is a service for LargeList. - diff --git a/docs/en/V2/CustomLoading.md b/docs/en/V2/CustomLoading.md deleted file mode 100644 index 91d0ea5..0000000 --- a/docs/en/V2/CustomLoading.md +++ /dev/null @@ -1,145 +0,0 @@ -# Customize loading - -Understand the refreshing status before customizing refreshing: - -* "waiting": The content view is not out of the bottom yet. -* "dragging": The content view is out of the bottom but not too more to load. -* "draggingEnough": It is enough to load,but the finger has not touched up, and will load more data at once if touching up. -* "draggingCancel": Drag back after the `draggingEnough` status. -* "loading": Loading data. -* "rebound": The loading has been completed and it is rebounding. -* "allLoaded": Whether the data is all loaded. - -### Customize - -#### Import -```$js -import { LoadingFooter } from "react-native-spring-scrollview/LoadingFooter"; -``` - -#### Extends `LoadingFooter` -```$js -class MyFooter extends LoadingFooter{} -``` - -#### Overwrite `render` -```$js -render() { - return {this.state.status} -} -``` - -LoadingFooter has these props and states extended from its parent. You can use it directly. -* this.props.maxHeight: The type is `number`, it is the height for the loading footer. -* this.props.offset: The type is `Animated.Value`, Animated value for contentOffset.y of the SpringScrollView -* this.props.bottomOffset, The type is `number`,The max contentOffset of the SpringScrollView, You can use it to make interpolate animation. -* this.state.status: The type is `FooterStatus`, it is the status of the loading footer. -```$js -export type FooterStatus = - | "waiting" - | "dragging" - | "draggingEnough" - | "draggingCancel" - | "releaseRebound" - | "loading" - | "rebound" - | "allLoaded"; -``` - -#### Customize the height of the loading footer -Overwrite the static var `height` to change the height of the loading footer. -```$js -class MyFooter extends LoadingFooter{ - static height:number = 50; -} -``` - -#### Select the loading style - -Overwrite the static var `style` to change the style of the loading footer. -``` -class MyFooter extends LoadingFooter{ - static style:string = "stickyContent"; -} -``` - -SpringScrollView supports 3 kinds of style for loading footer,default is `stickyContent` : - -style | preview ----- | ------ -"bottoming" | ![bottoming](../../res/LoadingBottoming.gif) -"stickyScrollView" | ![stickyScrollView](../../res/LoadingStickyScrollView.gif) -"stickyContent" | ![stickyContent](../../res/LoadingStickyContent.gif) - -#### Apply your customize loading footer to SpringScrollView -```$js - -``` - -Fully example is here [NormalFooter](https://github.com/bolan9999/react-native-spring-scrollview/blob/master/src/LoadingFooter.js) - -#### Native interpolate animation - -this.props.offset: Native driver animated value for contentOffset.y of the SpringScrollView, you can use it to make a native animation. - -Example: - -```$js - -``` - -Fully example is here [NormalFooter](https://github.com/bolan9999/react-native-spring-scrollview/blob/master/src/NormalFooter.js) - -#### Lottie animation support - -``` -export class CommonLottieFooter extends RefreshHeader { - static height: number = 100; - - render() { - if (this.state.status === "allLoaded") return null; - const { offset, bottomOffset } = this.props; - let progress = offset.interpolate({ - inputRange: [ - bottomOffset + 50, - bottomOffset + 500 - ], - outputRange: [0, 1] - }); - if (this.state.status === "loading") { - progress = undefined; - } - return ( - - - - ); - } -} -``` -Full lottie animation example is here [CommonLottieFooter](https://github.com/bolan9999/react-native-spring-scrollview/blob/master/src/Customize/CommonLottieFooter.js) - -### Contribute your awesome loading footer - -Fork [react-native-spring-scrollview](https://github.com/bolan9999/react-native-spring-scrollview), make awesome loading footer in the [Customize](https://github.com/bolan9999/react-native-spring-scrollview/tree/master/src/Customize) dir, and pull a request to me. diff --git a/docs/en/V2/CustomRefresh.md b/docs/en/V2/CustomRefresh.md deleted file mode 100644 index c5a2309..0000000 --- a/docs/en/V2/CustomRefresh.md +++ /dev/null @@ -1,135 +0,0 @@ -# Customize refreshing - -Understand the refreshing status before customizing refreshing: - -* `waiting`: The content view is not out of the top yet. -* `pulling`: The content view is out of the top but not too more to refresh. -* `pullingEnough`: It is enough to refresh,but the finger has not touched up, and will refresh at once if touching up. -* `pullingCancel`: Drag back after the `pullingEnough` status. -* `refreshing`: Refreshing -* `rebound`: The refreshing has been completed and it is rebounding. - -### Customize - -#### Import -```$js -import { RefreshHeader } from "react-native-spring-scrollview/RefreshHeader"; -``` - -#### Extends `RefreshHeader` -```$js -class MyHeader extends RefreshHeader{} -``` - -#### Overwrite `render` -```$js -render() { - return {this.state.status} -} -``` - -RefreshHeader has these props and states extended from its parent. You can use it directly. - -* this.props.maxHeight: The type is `number`, it is the height for the refreshing header. -* this.props.offset: The type is `Animated.Value`, Animated value for contentOffset.y of the SpringScrollView -* this.state.status: The type is `HeaderStatus`, it is the status of the refreshing header. -```$js -export type HeaderStatus = - | "waiting" - | "pulling" - | "pullingEnough" - | "pullingCancel" - | "refreshing" - | "rebound"; -``` - -#### Customize the height of the refreshing header - -Overwrite the static var `height` to change the height of the refreshing header. -``` -class MyHeader extends RefreshHeader{ - static height:number = 50; -} -``` - -#### Select the refreshing style - -Overwrite the static var `style` to change the style of the refreshing header.,default is "stickyContent": -``` -class MyHeader extends RefreshHeader{ - static style:string = "stickyContent"; -} -``` - -SpringScrollView supports 3 kinds of style for refreshing header: - -style | preview ----- | ------ -"topping" | ![topping](../../res/RefreshingTopping.gif) -"stickyScrollView" | ![stickyScrollView](../../res/RefreshingStickyScrollView.gif) -"stickyContent" | ![stickyContent](../../res/RefreshingStickyContent.gif) - -#### Apply your customize refreshing header to SpringScrollView -```$js - -``` - -Fully example is here [NormalHeader](https://github.com/bolan9999/react-native-spring-scrollview/blob/master/src/NormalHeader.js) - -#### Native interpolate animation - -this.props.offset: Native driver animated value for contentOffset.y of the SpringScrollView, you can use it to make a native animation. - -Example: - -```$js - -``` - -Fully example is here [NormalHeader](https://github.com/bolan9999/react-native-spring-scrollview/blob/master/src/NormalHeader.js) - -#### Lottie animation support - -Example: -``` -export class CommonLottieHeader extends RefreshHeader { - static height: number = 100; - - render() { - let progress = this.props.offset.interpolate({ - inputRange: [-200, -150, -150, -100, -100, -50], - outputRange: [1, 0, 1, 0, 1, 0] - }); - if (this.state.status === "refreshing") { - progress = undefined; - } - return ( - - - - ); - } -} -``` - -Full example is here [CommonLottieHeader](https://github.com/bolan9999/react-native-spring-scrollview/blob/master/src/Customize/CommonLottieHeader.js) - -### Contribute your awesome refreshing headers - -Fork [react-native-spring-scrollview](https://github.com/bolan9999/react-native-spring-scrollview), make awesome refreshing header in the [Customize](https://github.com/bolan9999/react-native-spring-scrollview/tree/master/src/Customize) dir, and pull a request to me. diff --git a/docs/en/V2/DetailControl.md b/docs/en/V2/DetailControl.md deleted file mode 100644 index db536eb..0000000 --- a/docs/en/V2/DetailControl.md +++ /dev/null @@ -1,11 +0,0 @@ -# 细节控制 - -属性 | 类型 | 默认值 |  作用   ----- | ------ | --------- | -------- -decelerationRate | number | 0.998 | 在内容视图内松开手指,减速滑动的阻尼系数,单位是每毫秒百分比 -decelerationRateWhenOut | number | 0.9 | 超出内容视图以后松开手指,减速滑动的阻尼系数,单位是每毫秒百分比 -dampingCoefficient | number | 0.5 | 超出内容视图以后,继续滑动的阻尼系数,单位是百分比 -reboundEasing | (value: number) => number | Easing.cos | 超出内容视图松开手指完成减速以后的回弹动画函数 -reboundDuration | number | 300 | 回弹的时间 -getNativeOffset | (offset: Animated.Value) => any | ()=>null | 获得监听滑动偏移并支持原生动画的动画值(该值是合成值,不可监听,不可修改,只能用于原生动画,并且在[处理键盘遮挡](TextInput)的偏移中,该值不会改变) -indicatorDismissTimeInterval | number | 3000 | LargeList滚动停止后指示器衰弱隐藏的时间间隔,单位毫秒 diff --git a/docs/en/V2/Event.md b/docs/en/V2/Event.md deleted file mode 100644 index 7232ee0..0000000 --- a/docs/en/V2/Event.md +++ /dev/null @@ -1,27 +0,0 @@ -### onTouchBegin : ()=>any -```$js -{ - console.log("onTouchBegin"); -} /> -``` - -### onTouchEnd : ()=>any -```$js -{ - console.log("onTouchEnd"); -} /> -``` - -### onMomentumScrollBegin : ()=>any -```$js -{ - console.log("onMomentumScrollBegin"); -} /> -``` - -### onMomentumScrollEnd : ()=>any -```$js -{ - console.log("onMomentumScrollEnd"); -} /> -``` diff --git a/docs/en/V2/KnownIssues.md b/docs/en/V2/KnownIssues.md deleted file mode 100644 index 834702b..0000000 --- a/docs/en/V2/KnownIssues.md +++ /dev/null @@ -1,2 +0,0 @@ -# Known issues -1. Can not nested with self, but can nested with ScrollView diff --git a/docs/en/V2/Loading.md b/docs/en/V2/Loading.md deleted file mode 100644 index c81376d..0000000 --- a/docs/en/V2/Loading.md +++ /dev/null @@ -1,54 +0,0 @@ -# Loading - -### Preview -![Preview](../../res/LoadingStickyContent.gif) - -### Code - -Import - -```$js -import { SpringScrollView } from "react-native-spring-scrollview"; -import { NormalFooter } from "react-native-spring-scrollview/NormalFooter"; -``` - -It is easy to support loading more data with SpringScrollView. This library offers a `NormalFooter` for you. And you can try other loading footers in the [Customize](https://github.com/bolan9999/react-native-spring-scrollview/tree/master/src/Customize) dir. - -```$js - (this._scrollView = ref)} - loadingFooter={NormalFooter} - allLoaded={this.state.allLoaded} - onLoading={()=>{ - setTimeOut(()=>{ - this._scrollView.endLoading(); - this.setState({...}); - },2000); - }> - - This is a Normal Loading Test - - -``` - - -### Props - -Props | Type | Default |  Description   ----- | ------ | --------- | -------- -onLoading | ()=>any | undefined | The callback of loading. If set this prop, a loading footer will add to the botom of the SpringScrollView -allLoaded | boolean | false | Whether the data is all loaded. -loadingFooter | LoadingFooter | NormalFooter | The footer component of loading. If you want to customize loading footer , this will be helpful [Custom Loading](/en/V2/CustomLoading) - - - -### All loading footers in this library - -``` -import {NormalFooter} from "react-native-spring-scrollview/NormalFooter"; -import { - WithLastDateFooter, - ChineseNormalFooter, - ChineseWithLastDateFooter, -} from "react-native-spring-scrollview/Customize"; -``` diff --git a/docs/en/V2/Refresh.md b/docs/en/V2/Refresh.md deleted file mode 100644 index 6903e1d..0000000 --- a/docs/en/V2/Refresh.md +++ /dev/null @@ -1,57 +0,0 @@ -# Pull to refresh - -### Preview -![Preview](../../res/RefreshingStickyContent.gif) - -### Import - -```$js -import { SpringScrollView } from "react-native-spring-scrollview"; -import { NormalHeader } from "react-native-spring-scrollview/NormalHeader"; -``` - -It is easy to support pulling to refresh with SpringScrollView. This library offers a `NormalHeader` for you. And you can try other refresh headers in the [Customize](https://github.com/bolan9999/react-native-spring-scrollview/tree/master/src/Customize) dir. - -### Simple Example - -```$js - (this._scrollView = ref)} - refreshHeader={ChineseWithLastDateHeader} - onRefresh={()=>{ - setTimeOut(()=>{ - this._scrollView.endRefresh(); - this.setState(...); - },2000); - } - - This is a Normal Refresh Test - - -``` - -Props | Type | Default |  description   ----- | ------ | --------- | -------- -onRefresh | ()=>any | undefined | The callback when refreshing. When this props is configured, a refresh header will be add on the top of the SpringScrollView -refreshHeader | [RefreshHeader](https://github.com/bolan9999/react-native-spring-scrollview/blob/master/src/RefreshHeader.js) | NormalHeader | Select a refreshing header , The headers in the [Customize](https://github.com/bolan9999/react-native-spring-scrollview/tree/master/src/Customize) dir are all supported - - -**Precautions:** refreshHeaderHeight is not supported after V2. If you want to customize the height of the refreshing header. View [Customize the refreshing header height](en/V2/CustomRefresh?id=自定义刷新组件的高度) below [custom refreshing](en/V2/CustomRefresh) please. - - -### Methods - -### endRefresh() - -End the refreshing status. - -### All refreshing headers in this library - -``` -import {NormalRefresh} from "react-native-spring-scrollview/NormalRefresh"; -import { - WithLastDateHeader, - ChineseNormalHeader, - ChineseWithLastDateHeader, -} from "react-native-spring-scrollview/Customize"; -``` diff --git a/docs/en/V2/Scroll.md b/docs/en/V2/Scroll.md deleted file mode 100644 index 006523b..0000000 --- a/docs/en/V2/Scroll.md +++ /dev/null @@ -1,60 +0,0 @@ -# Scroll to - -It is easy to scrollTo: - -### Firstly,get the reference of the SpringScrollView: -```$js -(this._scrollView = ref)} /> -``` - -### Secondly, call `scrollTo` -```$js -this._scrollView && this._scrollView.scrollTo({x:0,y:100}).then().catch(); -``` -### Available scrolling methods -scrollTo({x:number, y:number}, animated:boolean=true):Promise<void> - -scroll({x:number, y:number}, animated:boolean=true):Promise<void> - -scrollToBegin(animated:boolean=true):Promise<void> - -scrollToEnd(animated: boolean = true):Promise<void> - -# onScroll listener on Javascript - -### onScroll : ({nativeEvent:{contentOffset:{x:number, y:number}}})=>any - -```$js -{ - console.log("offset : x=", x, "y=", y); -}/> -``` - -**Precautions:** - -* The `contentOffset` can be able to out of content view range. -* Do not use `Animated.createAnimatedComponent`,SpringScrollView support all Animated.View styles, if you want to make a native interpolate animation, use `onNativeContentOffsetExtract` please. - -# Native onScroll listener - -### onNativeContentOffsetExtract : {x?:Animated.Value, y?:Animated.Value} - -This is a sticky view example: -```$js -_nativeOffset = { - y: new Animated.Value(0) -}; - -render(){ - return - - -} - -``` - - - - - - diff --git a/docs/en/V2/TextInput.md b/docs/en/V2/TextInput.md deleted file mode 100644 index 13d3153..0000000 --- a/docs/en/V2/TextInput.md +++ /dev/null @@ -1,50 +0,0 @@ -# Keyboard avoiding - -### Firstly:create a reference -```$js -_ref = React.createRef(); -``` - -### Secondly:assign to ref -```$js - - - ...//Other content - - - ); - } -} -``` - -Full example is here [InputExample](https://github.com/bolan9999/react-native-spring-scrollview/blob/master/Examples/InputExample.js) - - - diff --git a/docs/en/V2/Usage.md b/docs/en/V2/Usage.md deleted file mode 100644 index fa06256..0000000 --- a/docs/en/V2/Usage.md +++ /dev/null @@ -1,34 +0,0 @@ -# Simple Usage - -Import: -```$js -import { SpringScrollView } from "react-native-spring-scrollview"; -``` - -Check weather the installation is correct with the code below. See [Examples](https://github.com/bolan9999/react-native-spring-scrollview/tree/master/Examples) for more details. - -```$js -export class BouncesAndScrollEnabledExample extends React.Component { - _contentCount = 20; - render() { - const arr = []; - for (let i = 0; i < this._contentCount; ++i) arr.push(i); - return ( - - {arr.map((i, index) => - - Modify the '_contentCount','_bounces' and '_scrollEnabled' in - BouncesExample.js to check if VerticalScrollView works well. - - )} - - ); - } -} -const styles = StyleSheet.create({ - text:{ - fontSize:16, - margin:20 - } -}); -``` diff --git a/docs/index.html b/docs/index.html deleted file mode 100644 index feddac0..0000000 --- a/docs/index.html +++ /dev/null @@ -1,44 +0,0 @@ - - - - - - - SpringScrollViewExample - - - - - - - - - -
- - -
- - diff --git a/docs/res/LoadingBottoming.gif b/docs/res/LoadingBottoming.gif deleted file mode 100644 index e9f7f88..0000000 Binary files a/docs/res/LoadingBottoming.gif and /dev/null differ diff --git a/docs/res/LoadingStickyContent.gif b/docs/res/LoadingStickyContent.gif deleted file mode 100644 index 4e690f2..0000000 Binary files a/docs/res/LoadingStickyContent.gif and /dev/null differ diff --git a/docs/res/LoadingStickyScrollView.gif b/docs/res/LoadingStickyScrollView.gif deleted file mode 100644 index fe36a52..0000000 Binary files a/docs/res/LoadingStickyScrollView.gif and /dev/null differ diff --git a/docs/res/LottieLoading.gif b/docs/res/LottieLoading.gif deleted file mode 100644 index 015e91d..0000000 Binary files a/docs/res/LottieLoading.gif and /dev/null differ diff --git a/docs/res/LottieRefreshing.gif b/docs/res/LottieRefreshing.gif deleted file mode 100644 index 1f4d0f1..0000000 Binary files a/docs/res/LottieRefreshing.gif and /dev/null differ diff --git a/docs/res/RefreshingStickyContent.gif b/docs/res/RefreshingStickyContent.gif deleted file mode 100644 index b8f4034..0000000 Binary files a/docs/res/RefreshingStickyContent.gif and /dev/null differ diff --git a/docs/res/RefreshingStickyScrollView.gif b/docs/res/RefreshingStickyScrollView.gif deleted file mode 100644 index e484739..0000000 Binary files a/docs/res/RefreshingStickyScrollView.gif and /dev/null differ diff --git a/docs/res/RefreshingTopping.gif b/docs/res/RefreshingTopping.gif deleted file mode 100644 index a617dd9..0000000 Binary files a/docs/res/RefreshingTopping.gif and /dev/null differ diff --git a/docs/res/loading.png b/docs/res/loading.png deleted file mode 100644 index 2e5c211..0000000 Binary files a/docs/res/loading.png and /dev/null differ diff --git a/docs/zh-cn/V1/BasicContent.md b/docs/zh-cn/V1/BasicContent.md deleted file mode 100644 index 61b0ac6..0000000 --- a/docs/zh-cn/V1/BasicContent.md +++ /dev/null @@ -1,22 +0,0 @@ -### 概述 - -VerticalScrollView是一个支持竖直方向滑动的弹性ScrollView,和官方的ScrollView一样,简单粗暴地将所有内容一次性渲染出来,特别适合少量可滑动内容界面。 - -与官方的ScrollView一样,VerticalScrollView必须有一个确定的高度才能正常工作,因为它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器(通过滚动操作)。要给一个ScrollView确定一个高度的话,要么直接给它设置高度(不建议),要么确定所有的父容器都有确定的高度。一般来说我们会给ScrollView设置flex: 1以使其自动填充父容器的空余空间,但前提条件是所有的父容器本身也设置了flex或者指定了高度,否则就会导致无法正常滚动,你可以使用元素查看器来查找问题的原因。 - -### style & contentStyle - -VerticalScrollView和官方的ScrollView一样, 由两个组件组成. style控制外层包裹视图的样式, contentStyle控制内层视图的样式。不一样的地方在于,官方的ScrollView 内层视图默认拥有以下样式: - -```$js -flexGrow: 1, -flexShrink: 1, -flexDirection: 'column', -overflow: 'scroll', -``` - -并且这些属性都不可修改,VerticalScrollView则更自由,允许你自定义所有样式(除了transform属性,该属性已经用于滑动动画)。 - - -这意味着你可以轻松实现官方ScrollView 安卓上无法实现的contentInset,contentOffset,indicatorStyle,scrollIndicatorInsets等功能 - diff --git a/docs/zh-cn/V1/BasicControl.md b/docs/zh-cn/V1/BasicControl.md deleted file mode 100644 index 73891dc..0000000 --- a/docs/zh-cn/V1/BasicControl.md +++ /dev/null @@ -1,12 +0,0 @@ -# 基本控制 - - -属性 | 类型 | 默认值 |  作用   ----- | ------ | --------- | -------- -...ViewProps | | | View的所有属性 -bounces | boolean | true | 垂直方向滑动超出内容视图后是否可以弹性地继续滑动 -contentStyle | ViewStyle | undefined | 内容视图的样式。注意:transform无效 -scrollEnabled | boolean | true | 是否可以滚动 -initOffset | {x:number, y:number} | {x:0,y:0} | 初始化偏移,x值暂时无效,仅第一次初始化有效,后期更改无效 -showsVerticalScrollIndicator | boolean | true | 显示垂直滚动指示器 - diff --git a/docs/zh-cn/V1/CustomLoading.md b/docs/zh-cn/V1/CustomLoading.md deleted file mode 100644 index d61109c..0000000 --- a/docs/zh-cn/V1/CustomLoading.md +++ /dev/null @@ -1,116 +0,0 @@ -# 自定义上拉加载 - -在我们自定义上拉加载之前, 我们需要先了解一个上拉加载各个状态: - -* "waiting": 准备状态:视图还没有碰边 -* "dragging": 上拉状态:视图已经碰到边缘,但是还没有达到组件的高度,此时松手不具备加载的条件 -* "draggingEnough": 上拉足够态:视图已经达到组件的高度,但是用户还没有松手,松手即可进入加载态 -* "draggingCancel": 上拉取消态: 当用户上拉经历过上拉足够态,但是又往下拉,达不到加载的高度,则进入此状态,如果用户不松手,重新上拉可再次进入上拉足够态 -* "loading": 加载态:onLoading,此时正在加载中 -* "cancelLoading": 取消加载态: 在数据加载过程中,如果用户下拉,则会进入此状态 -* "rebound": 回弹态: 已经加载完成,正在往回弹的状态 -* "allLoaded": 数据加载完成态,此状态下不会触发刷新,该状态由allLoaded属性控制 - -### 流程 - -![LoadingProcess](../res/LoadingProcess.png) - -### 自定义 - -#### 导入 -```$js -import { LoadingFooter } from "react-native-spring-scrollview/LoadingFooter"; -``` - -#### 继承LoadingFooter -```$js -class MyFooter extends LoadingFooter{} -``` - -#### 重写render -```$js -render() { - return {this.state.status} -} -``` - -LoadingFooter自带有两个Props, 和一个状态status,在子类里面可以直接使用 -```$js -export type FooterStatus = - | "waiting" - | "dragging" - | "draggingEnough" - | "draggingCancel" - | "releaseRebound" - | "loading" - | "cancelLoading" - | "rebound" - | "allLoaded"; - -interface FooterPropType { - offset?: Animated.Value, - maxHeight?: number -} - -interface FooterStateType { - status?: FooterStatus -} -``` - -* this.props.maxHeight: 加载组件的高度 -* this.props.offset: 表示当前的Footer偏移量动画值,取值范围是[-this.props.maxHeight, 0] -* this.state.status: 表示当前加载组件正处在的状态 - - -#### 将自定义的加载组件应用到VerticalScrollView -```$js - -``` - -完整的示例可以查看[NormalFooter](https://github.com/bolan9999/react-native-spring-scrollview/blob/master/src/LoadingFooter.js) - -### 性能优化 - -#### 避免无用的状态改变带来的无用更新 -你可以通过重写onStateChange(oldStatus: HeaderStatus, newStatus: HeaderStatus)来阻止不需要的状态更新带来的re-render - -举个例子,如果你只需要区分正在加载和没有加载两种状态,那么你可以像下面这样优化它 -```$js -onStateChange(oldStatus: HeaderStatus, newStatus: HeaderStatus) { - if (oldStatus === "loading" || newStatus==="loading") { - this.setState({status:newStatus}); - } -} -``` - -除此之外,加载控件应当设计得足够简单(DOM节点数量不能太多,太多会造成卡顿) - -#### 渐变动画 - -this.props.offset: 表示当前的Header偏移量动画值,取值范围是[ -this.props.maxHeight,0 ], 你可以使用这个值来自定义你的动画: - -举个例子,如果你有个箭头图标,希望在上拉过程中旋转角度,当到达加载状态的时候,完全反转角度,那么你可以这样写 - -```$js -return ( - -); -``` - -完整的示例可以查看[NormalFooter](https://github.com/bolan9999/react-native-spring-scrollview/blob/master/src/NormalFooter.js) - -### 贡献您的自定义上拉加载组件 - -欢迎Fork react-native-spring-scrollview ,添加您精心制作的LoadingFooter, 提交Pull Request 合并到master,给其他人使用。 diff --git a/docs/zh-cn/V1/CustomRefresh.md b/docs/zh-cn/V1/CustomRefresh.md deleted file mode 100644 index 2a168a7..0000000 --- a/docs/zh-cn/V1/CustomRefresh.md +++ /dev/null @@ -1,114 +0,0 @@ -# 自定义下拉刷新 - -在我们自定义下拉刷新之前, 我们需要先了解一个下拉刷新各个状态: - -* "waiting": 准备状态:视图还没有碰边 -* "pulling": 下拉状态:视图已经碰到边缘,但是还没有达到组件的高度,此时松手不具备刷新的条件 -* "pullingEnough": 下拉足够态:视图已经达到组件的高度,但是用户还没有松手,松手即可进入刷新态 -* "pullingCancel": 下拉取消态: 当用户下拉经历过下拉足够态,但是又往上拉,达不到刷新的高度,则进入此状态,如果用户不松手,重新下拉可再次进入下拉足够态 -* "refreshing": 刷新态:已经触发onRefresh,此时正在刷新中 -* "cancelRefresh": 取消刷新态: 在数据刷新过程中,如果用户上拉,则会进入此状态 -* "rebound": 回弹态: 已经刷新完成,正在往回弹的状态 - -### 流程 - -![RefreshProcess](../res/RefreshProcess.png) - -### 自定义 - -#### 导入 -```$js -import { RefreshHeader } from "react-native-spring-scrollview/RefreshHeader"; -``` - -#### 继承RefreshHeader -```$js -class MyHeader extends RefreshHeader{} -``` - -#### 重写render -```$js -render() { - return {this.state.status} -} -``` - -RefreshHeader自带有两个Props, 和一个状态status,在子类里面可以直接使用 -```$js -interface HeaderPropType { - offset?: Animated.Value, - maxHeight?:number -} - -export type HeaderStatus = - | "waiting" - | "pulling" - | "pullingEnough" - | "pullingCancel" - | "refreshing" - | "cancelRefresh" - | "rebound"; - -interface HeaderStateType { - status?: HeaderStatus -} -``` - -* this.props.maxHeight: 刷新组件的高度 -* this.props.offset: 表示当前的Header偏移量动画值,取值范围是[0, this.props.maxHeight] -* this.state.status: 表示当前刷新组件正处在的状态 - - -#### 将自定义的刷新组件应用到VerticalScrollView -```$js - -``` - -完整的示例可以查看[NormalHeader](https://github.com/bolan9999/react-native-spring-scrollview/blob/master/src/NormalHeader.js) - -### 性能优化 - -#### 避免无用的状态改变带来的无用更新 -你可以通过重写onStateChange(oldStatus: HeaderStatus, newStatus: HeaderStatus)来阻止不需要的状态更新带来的re-render - -举个例子,如果你只需要区分正在刷新和没有刷新两种状态,那么你可以像下面这样优化它 -```$js -onStateChange(oldStatus: HeaderStatus, newStatus: HeaderStatus) { - if (oldStatus === "refreshing" || newStatus==="refreshing") { - this.setState({status:newStatus}); - } -} -``` - -除此之外,刷新控件应当设计得足够简单(DOM节点数量不能太多,太多会造成卡顿) - -#### 渐变动画 - -this.props.offset: 表示当前的Header偏移量动画值,取值范围是[0, this.props.maxHeight], 你可以使用这个值来自定义你的动画: - -举个例子,如果你有个箭头图标,希望在下拉过程中旋转角度,当到达刷新状态的时候,完全反转角度,那么你可以这样写 - -```$js -return ( - -); -``` - -完整的示例可以查看[NormalHeader](https://github.com/bolan9999/react-native-spring-scrollview/blob/master/src/NormalHeader.js) - -### 贡献您的自定义下拉刷新组件 - -欢迎Fork react-native-spring-scrollview ,添加您精心制作的RefreshHeader, 提交Pull Request 合并到master,给其他人使用。 - diff --git a/docs/zh-cn/V1/DetailControl.md b/docs/zh-cn/V1/DetailControl.md deleted file mode 100644 index db536eb..0000000 --- a/docs/zh-cn/V1/DetailControl.md +++ /dev/null @@ -1,11 +0,0 @@ -# 细节控制 - -属性 | 类型 | 默认值 |  作用   ----- | ------ | --------- | -------- -decelerationRate | number | 0.998 | 在内容视图内松开手指,减速滑动的阻尼系数,单位是每毫秒百分比 -decelerationRateWhenOut | number | 0.9 | 超出内容视图以后松开手指,减速滑动的阻尼系数,单位是每毫秒百分比 -dampingCoefficient | number | 0.5 | 超出内容视图以后,继续滑动的阻尼系数,单位是百分比 -reboundEasing | (value: number) => number | Easing.cos | 超出内容视图松开手指完成减速以后的回弹动画函数 -reboundDuration | number | 300 | 回弹的时间 -getNativeOffset | (offset: Animated.Value) => any | ()=>null | 获得监听滑动偏移并支持原生动画的动画值(该值是合成值,不可监听,不可修改,只能用于原生动画,并且在[处理键盘遮挡](TextInput)的偏移中,该值不会改变) -indicatorDismissTimeInterval | number | 3000 | LargeList滚动停止后指示器衰弱隐藏的时间间隔,单位毫秒 diff --git a/docs/zh-cn/V1/GettingStart.md b/docs/zh-cn/V1/GettingStart.md deleted file mode 100644 index 9b3d43e..0000000 --- a/docs/zh-cn/V1/GettingStart.md +++ /dev/null @@ -1,34 +0,0 @@ -# 快速接入 - -该项目依赖 [react-native-gesture-handler](https://github.com/kmagiera/react-native-gesture-handler), 在接入本库之前请先阅读[react-native-gesture-handler接入文档](https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html#installation)正确接入react-native-gesture-handler - -### 接入[react-native-gesture-handler](https://github.com/kmagiera/react-native-gesture-handler) -大概步骤就是: -```$node -yarn add react-native-gesture-handler -react-native link react-native-gesture-handler -``` -使用包装后的组件替代您的ScreenComponent -```$js -import { gestureHandlerRootHOC } from 'react-native-gesture-handler' - -class YourScreen extends React.Component{ - //... -}; - -export const YourScreenWrapper = gestureHandlerRootHOC(YourScreen); -``` -在任何地方使用YourScreenWrapper替代YourScreen - -到此,[react-native-gesture-handler](https://github.com/kmagiera/react-native-gesture-handler)就已经安装完成。 - -### 接入[react-native-spring-scrollview](https://github.com/bolan9999/react-native-spring-scrollview) - -接下来使用下面命令安装react-native-spring-scrollview - -```$node -yarn add react-native-spring-scrollview -``` - - - diff --git a/docs/zh-cn/V1/Loading.md b/docs/zh-cn/V1/Loading.md deleted file mode 100644 index e4c8bb3..0000000 --- a/docs/zh-cn/V1/Loading.md +++ /dev/null @@ -1,93 +0,0 @@ -# 上拉加载 - -### 预览 -![Preview](../res/LoadingAndroid.gif) -![Preview](../res/LoadingIOS.gif) - -### 代码 - -导入 - -```$js -import { VerticalScrollView } from "react-native-spring-scrollview"; -import { NormalFooter } from "react-native-spring-scrollview/NormalFooter"; -``` - -使用VerticalScrollView可以非常简单地实现上拉加载的功能, 本库默认提供了一个NormalFooter类供用户使用 - -```$js - (this._scrollView = ref)} - style={styles.container} - loadingFooterHeight={60} - loadingFooter={NormalFooter} - allLoaded={false} - onLoading={()=>{ - this._scrollView.beginLoading(); - setTimeOut(()=>{ - this._scrollView.endLoading(); - setTimeOut(()=>this.setState({prop:"your changed props"})); - },2000); - } - onCancelLoading={()=>{ - console.log("当上拉加载,但是用户主动回拉取消时回调"); - }> - - This is a Normal Refresh and Loading Test - - -``` - - -### 属性 - -#### loadingFooterHeight - -类型:number - -默认值: 80 - -描述:上拉加载组件的高度 - -#### loadingFooter - -类型:LoadingFooter - -默认值: undefined - -描述:上拉加载组件,用户如果不希望自定义,则可以使用NormalFooter,如果需要高度自定义,请参看[自定义上拉加载](CustomLoading) - -#### onLoading - -类型:()=>any - -默认值:()=>null - -描述:上拉加载的回调函数 - -#### onCancelLoading - -类型:()=>any - -默认值:()=>null - -描述:触发上拉加载回调以后,在加载的过程中,用户可以回拉取消加载,如果你希望在此回调,则可以在此做您的操作。 - -### allLoaded - -类型:boolean - -默认值: false - -描述:数据是否加载完成。 - -### 方法 - -#### beginLoading() - -开始加载,弹出(或回弹)加载组件 - -### endLoading(rebound: boolean = false) - -结束加载,rebound表示是否需要回弹关闭加载组件,如果你的数据是增加了,那么这个属性就可以使用默认的。 在onLoading完成数据请求以后,我们建议您先使用此方法开启结束动画,再setTimeout更新内容,这样在加载过程中,动画更流畅 - diff --git a/docs/zh-cn/V1/README.md b/docs/zh-cn/V1/README.md deleted file mode 100644 index c7906c0..0000000 --- a/docs/zh-cn/V1/README.md +++ /dev/null @@ -1,32 +0,0 @@ -# 欢迎 - -欢迎使用**React Native Spring ScrollView**! - -### **React Native Spring ScrollView**是什么? - -**React Native Spring ScrollView** 是JavaScript实现的一组高性能弹性ScrollView家族,使用它可以轻松地实现iOS风格的下拉刷新及上拉加载更多,拥有完全一致的视图表现及原生的弹性体验,并且兼容iOS和Android。 - -### 功能 - - -* iOS原生风格的弹性ScrollView -* iOS和安卓完全一致的视图表现,没有任何平台相关的专有属性 -* 媲美原生的滑动体验 -* 高度自定义的下拉刷新和上拉加载更多动画 -* 支持输入框防遮挡 -* 比官方ScrollView更完善和稳定的响应系统 -* 支持滑动到指定位置 -* 比官方ScrollView更精密的细节控制,比如:松手后的阻尼系数,超出内容视图的阻尼系数、减速系数,回弹动画、回弹时间均可配置 -* 支持根据滑动偏移自定义原生驱动的动画 -* 支持初始化偏移 -* 支持自定义滑块指示器(未实现) -* 支持大列表(未实现) - - -### 预览 -![Preview](../res/demo1.gif) -![Preview](../res/demo2.gif) -![Preview](../res/RefreshAndroid.gif) -![Preview](../res/RefreshIOS.gif) -![Preview](../res/LoadingAndroid.gif) -![Preview](../res/LoadingIOS.gif) diff --git a/docs/zh-cn/V1/Refresh.md b/docs/zh-cn/V1/Refresh.md deleted file mode 100644 index dd539f5..0000000 --- a/docs/zh-cn/V1/Refresh.md +++ /dev/null @@ -1,84 +0,0 @@ -# 下拉刷新 - -### 预览 -![Preview](../res/RefreshAndroid.gif) -![Preview](../res/RefreshIOS.gif) - -### 代码 - -导入 - -```$js -import { VerticalScrollView } from "react-native-spring-scrollview"; -import { NormalHeader } from "react-native-spring-scrollview/NormalHeader"; -``` - -使用VerticalScrollView可以非常简单地实现下拉刷新的功能, 本库默认提供了一个NormalHeader类供用户使用 - -```$js - (this._scrollView = ref)} - style={styles.container} - refreshHeaderHeight={60} - refreshHeader={NormalHeader} - onRefresh={()=>{ - this._scrollView.beginRefresh(); - setTimeOut(()=>{ - this._scrollView.endRefresh(); - setTimeOut(()=>this.setState({prop:"your changed props"})); - },2000); - } - onCancelRefresh={()=>{ - console.log("当下拉刷新,但是用户主动回拉取消时回调"); - }> - - This is a Normal Refresh and Loading Test - - -``` - - -### 属性 - -#### refreshHeaderHeight - -类型:number - -默认值: 80 - -描述:下拉刷新组件的高度 - -#### refreshHeader - -类型:RefreshHeader - -默认值: undefined - -描述:下拉刷新组件,用户如果不希望高度自定义,则可以使用NormalHeader,如果需要高度自定义,请参看[自定义下拉刷新](CustomRefresh) - -#### onRefresh - -类型:()=>any - -默认值:()=>null - -描述:下拉刷新的回调函数 - -#### onCancelRefresh - -类型:()=>any - -默认值:()=>null - -描述:触发下拉刷新回调以后,在刷新的过程中,用户可以回拉取消刷新,如果你希望在此回调,则可以在此做您的操作。 - -### 方法 - -#### beginRefresh() - -开始刷新,弹出(或回弹)刷新组件 - -### endRefresh() - -结束刷新,关闭刷新组件。 在onRefresh完成数据请求以后,我们建议您先使用此方法开启结束动画,再setTimeout更新内容,这样在下拉过程中,动画更流畅 - diff --git a/docs/zh-cn/V1/Scroll.md b/docs/zh-cn/V1/Scroll.md deleted file mode 100644 index cd5ee2d..0000000 --- a/docs/zh-cn/V1/Scroll.md +++ /dev/null @@ -1,84 +0,0 @@ -# 滑动 - -要使用代码滑动到指定位置,非常简单: - -### 第一步,获取VerticalScrollView的引用 -```$js -(this._scrollView = ref)} /> -``` - -### 第二步,使用scrollTo方法 -```$js -this._scrollView && this._scrollView.scrollTo({x:0,y:100}); -``` - -scrollTo({x:number, y:number}, animated=true) - -滑动到指定的偏移,注意: - -* x坐标目前没有任何效果 - -* 如果超出 VerticalScrollView的内容范围,将自动矫正到极端位置 - - -# 监听滑动 - -### onScroll : ({x:number, y:number})=>any - -```$js -{ - console.log("offset : x=", x, "y=", y); -} /> -``` - -注意: - -* y值是有可能超出内容范围之外的 -* 遮挡键盘的偏移处理当中,该函数不会回调 -* 如果需要提高性能,使用原生动画驱动,则可以考虑使用下面的方法 - -### onTouchBegin : ()=>any -手指按下时回调 -```$js -{ - console.log("onTouchBegin"); -} /> -``` - -### onTouchEnd : ()=>any -手指按下时回调 -```$js -{ - console.log("onTouchEnd"); -} /> -``` - -### onMomentumScrollStart : ()=>any -手指按下时回调 -```$js -{ - console.log("onMomentumScrollStart"); -} /> -``` - -### onMomentumScrollEnd : ()=>any -手指按下时回调 -```$js -{ - console.log("onMomentumScrollEnd"); -} /> -``` - -# 监听原生偏移值 - -### getNativeOffset : (offset: Animated.Value) => any - -获得监听滑动偏移并支持原生动画的动画值(该值是合成值,不可监听,不可修改,只能用于原生动画,键盘遮挡的偏移动画不会触发此值更改) - -```$js -{ - //可以将此offset做任何插值运算并应用到你的组件里面,这样将在原生动画中驱动动画 -} /> -``` - - diff --git a/docs/zh-cn/V1/TextInput.md b/docs/zh-cn/V1/TextInput.md deleted file mode 100644 index 0734402..0000000 --- a/docs/zh-cn/V1/TextInput.md +++ /dev/null @@ -1,72 +0,0 @@ -# 处理键盘遮挡 - -移动APP经常会遇到一个尴尬的问题,输入框的键盘遮挡问题。不用担心,使用VerticalScrollView能够很轻松的处理键盘遮挡问题。 - -### 第一步:创建ReactRef引用 -```$js -_ref = React.createRef(); -``` - -### 第二步:让ref指向TextInput -```$js - - - ...//Other content - - - ); - } -} -``` - -具体参见[InputExample](https://github.com/bolan9999/react-native-spring-scrollview/blob/master/Examples/InputExample.js) - - -### 属性 - -#### textInputRefs - -类型:TextInput[] - -默认值:[] - -描述:将TextInput的引用传入,让VerticalScrollView自动管理键盘遮挡问题。 - -#### tapToHideKeyboard - -类型:boolean - -默认值:true - -描述:触摸屏幕时是否隐藏键盘 - -#### inputToolBarHeight - -类型:number - -默认值:44 - -描述:不同的系统,不同的三方输入法,键盘的工具栏高度是不确定的,并且官方没有给出获取工具栏高度的办法,这个属性用以给用户小幅调整键盘弹起时,组件偏移的位置 - - - diff --git a/docs/zh-cn/V1/Usage.md b/docs/zh-cn/V1/Usage.md deleted file mode 100644 index bed99c8..0000000 --- a/docs/zh-cn/V1/Usage.md +++ /dev/null @@ -1,37 +0,0 @@ -# 简单使用 - -像下面这样导入你的工程: -```$js -import { VerticalScrollView } from "react-native-spring-scrollview"; -``` - -使用下面的JS代码检查是否接入成功, 详见 [Examples](https://github.com/bolan9999/react-native-spring-scrollview/tree/master/Examples) - -```$js -export class BouncesAndScrollEnabledExample extends React.Component { - _contentCount = 20; - render() { - const arr = []; - for (let i = 0; i < this._contentCount; ++i) arr.push(i); - return ( - - {arr.map((i, index) => - - Modify the '_contentCount','_bounces' and '_scrollEnabled' in - BouncesExample.js to check if VerticalScrollView works well. - - )} - - ); - } -} -const styles = StyleSheet.create({ - container: { - flex: 1 - }, - text:{ - fontSize:16, - margin:20 - } -}); -``` diff --git a/docs/zh-cn/V1/_sidebar.md b/docs/zh-cn/V1/_sidebar.md deleted file mode 100644 index 125b1f1..0000000 --- a/docs/zh-cn/V1/_sidebar.md +++ /dev/null @@ -1,16 +0,0 @@ -* [Version 2 (Latest)](zh-cn/README) -* [Version 1 (stale:0.0.1)](zh-cn/V1) - * 入门 - * [欢迎](zh-cn/V1/README) - * [快速接入](zh-cn/V1/GettingStart) - * [简单使用](zh-cn/V1/Usage) - * VerticalScrollView - * [基本内容](zh-cn/V1/BasicContent) - * [基本控制](zh-cn/V1/BasicControl) - * [下拉刷新](zh-cn/V1/Refresh) - * [自定义下拉刷新](zh-cn/V1/CustomRefresh) - * [上拉加载](zh-cn/V1/Loading) - * [自定义上拉加载](zh-cn/V1/CustomLoading) - * [细节控制](zh-cn/V1/DetailControl) - * [处理键盘遮挡](zh-cn/V1/TextInput) - * [滑动 & 监听滑动](zh-cn/V1/Scroll) diff --git a/docs/zh-cn/V2/BasicContent.md b/docs/zh-cn/V2/BasicContent.md deleted file mode 100644 index 692645b..0000000 --- a/docs/zh-cn/V2/BasicContent.md +++ /dev/null @@ -1,25 +0,0 @@ -### 概述 - -SpringScrollView是一个支持水平竖直方向同时滑动的弹性ScrollView,和官方的ScrollView一样,简单粗暴地将所有内容一次性渲染出来,特别适合少量可滑动内容界面。如果您想要一个支持重用的大列表组件,也许[LargeList](https://bolan9999.github.io/react-native-largelist/#/)是个不错的选择。 - -与官方的ScrollView一样,SpringScrollView必须有一个确定的高度才能正常工作,因为它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器(通过滚动操作)。SpringScrollView默认具有{flex:1}的样式,因此要使SpringScrollView正常工作,它的父容器必须是确定高度的,你也可以通过手动指定样式,使之正常工作。 - -### style & contentStyle - -SpringScrollView和官方的ScrollView一样, 由两个组件组成. style控制外层包裹视图的样式, contentStyle控制内层视图的样式。不一样的地方在于,官方的ScrollView 内层视图默认拥有以下样式: - -```$js -flexGrow: 1, -flexShrink: 1, -flexDirection: 'column', -overflow: 'scroll', -``` - -并且这些属性都不可修改,VerticalScrollView默认contentStyle是View的通用默认样式`{flexDirection:"column",justifyContent:"stretch"}`,并且它更自由,允许你自定义几乎所有样式(除了transform属性,该属性已经用于滑动动画)。 - -属性 | 类型 | 默认值 |  作用   ----- | ------ | --------- | -------- -style | Animated.[ViewStyle](http://facebook.github.io/react-native/docs/view-style-props) | {flex:1} | 控制外层容器样式,直接支持Animated样式 -contentStyle | [ViewStyle](http://facebook.github.io/react-native/docs/view-style-props) | - | 控制内层内容视图的样式 - -注意:V2版本SpringScrollView已经支持水平垂直方向同时滑动了,contentStyle可以支持{width:"200%"}等宽度超过父元素的样式 diff --git a/docs/zh-cn/V2/BasicControl.md b/docs/zh-cn/V2/BasicControl.md deleted file mode 100644 index f805318..0000000 --- a/docs/zh-cn/V2/BasicControl.md +++ /dev/null @@ -1,18 +0,0 @@ -# 基本控制 - - -属性 | 类型 | 默认值 |  作用   ----- | ------ | --------- | -------- -...ViewProps | - | | View的所有属性 -bounces | boolean | true | 滑动超出内容视图后是否可以弹性地继续滑动(iOS & Android,如果为true,水平方向内容视图如果没有超过SpringScrollView则不会有弹性,垂直方向始终具有弹性) -contentStyle | ViewStyle | undefined | 内容视图的样式。注意:transform无效 -scrollEnabled | boolean | true | 是否可以滚动 -directionalLockEnabled | boolean | false | 支持双向滑动的情况下,控制一次滑动只允许水平或垂直一个方向。 -initialContentOffset | {x:number, y:number} | undefined | 初始化偏移,仅第一次初始化有效,后期更改无效(已支持x方向) -showsVerticalScrollIndicator | boolean | true | 显示垂直滚动指示器 -showsHorizontalScrollIndicator | boolean | true | 显示水平滚动指示器(内容视图超出SpringScrollview视口才有用) -tapToHideKeyboard | boolean | true | 点击SpringScrollView是否收起键盘 -onSizeChange | ({width:number,height:number})=>any | undefined | 外部Wrapper视图宽高变化时回调 -onContentSizeChange | ({width:number,height:number})=>any | undefined | 内部ContentView视图宽高变化时回调 -inverted | boolean | false | 将SpringScrollView上下翻转,此属性单独意义不大,主要是为了LargeList提供功能 - diff --git a/docs/zh-cn/V2/CustomLoading.md b/docs/zh-cn/V2/CustomLoading.md deleted file mode 100644 index 2a09e1a..0000000 --- a/docs/zh-cn/V2/CustomLoading.md +++ /dev/null @@ -1,161 +0,0 @@ -# 自定义上拉加载 - -在我们自定义上拉加载之前, 我们需要先了解一个上拉加载各个状态: - -* "waiting": 准备状态:视图还没有碰边 -* "dragging": 上拉状态:视图已经碰到边缘,但是还没有达到组件的高度,此时松手不具备加载的条件 -* "draggingEnough": 上拉足够态:视图已经达到组件的高度,但是用户还没有松手,松手即可进入加载态 -* "draggingCancel": 上拉取消态: 当用户上拉经历过上拉足够态,但是又往下拉,达不到加载的高度,则进入此状态,如果用户不松手,重新上拉可再次进入上拉足够态 -* "loading": 加载态:onLoading,此时正在加载中 -* "rebound": 回弹态: 已经加载完成,正在往回弹的状态 -* "allLoaded": 数据加载完成态,此状态下不会触发刷新,该状态由allLoaded属性控制 - -### 自定义 - -#### 导入 -```$js -import { LoadingFooter } from "react-native-spring-scrollview/LoadingFooter"; -``` - -#### 继承LoadingFooter -```$js -class MyFooter extends LoadingFooter{} -``` - -#### 重写render -```$js -render() { - return {this.state.status} -} -``` - -LoadingFooter自带有三个Props, 和一个状态status,在子类里面可以直接使用 -* this.props.maxHeight,类型:number 加载组件的高度 -* this.props.offset,类型:Animated.Value 表示当前SpringScrollView原生偏移量contentOffset.y的动画值,可以用作原生插值动画 -* this.props.bottomOffset, 类型number,表示最底部,可以用作插值演算 -* this.state.status, 类型:FooterStatus 表示当前加载组件正处在的状态 - -```$js -export type FooterStatus = - | "waiting" - | "dragging" - | "draggingEnough" - | "draggingCancel" - | "releaseRebound" - | "loading" - | "rebound" - | "allLoaded"; -``` - -#### 自定义加载控件高度 -只需要重写静态变量height就可以改变该加载组件的高度(**请注意这与V1有差别,V2取消了loadingFooterHeight属性,V2更加注重刷新组件的独立性**): -```$js -class MyFooter extends LoadingFooter{ - static height:number = 50; -} -``` - -#### 选择刷新组件的下拉样式 - -只需要重写静态变量style就可以改变刷新组件的样式: -``` -class MyFooter extends LoadingFooter{ - static style:string = "stickyContent"; -} -``` - -SpringScrollView目前支持三种样式,默认值是"stickyContent": - -style | 效果 ----- | ------ -"bottoming" | ![bottoming](../../res/LoadingBottoming.gif) -"stickyScrollView" | ![stickyScrollView](../../res/LoadingStickyScrollView.gif) -"stickyContent" | ![stickyContent](../../res/LoadingStickyContent.gif) - -#### 将自定义的加载组件应用到SpringScrollView -```$js - -``` - -完整的示例可以查看[NormalFooter](https://github.com/bolan9999/react-native-spring-scrollview/blob/master/src/LoadingFooter.js) - -### 性能优化 - -#### 避免无用的状态改变带来的无用更新 -你可以通过重写onStateChange(oldStatus: HeaderStatus, newStatus: HeaderStatus)来阻止不需要的状态更新带来的re-render - -举个例子,如果你只需要区分正在加载和没有加载两种状态,那么你可以像下面这样优化它 -```$js -onStateChange(oldStatus: HeaderStatus, newStatus: HeaderStatus) { - if (oldStatus === "loading" || newStatus==="loading") { - this.setState({status:newStatus}); - } -} -``` - -除此之外,加载控件应当设计得足够简单(DOM节点数量不能太多,太多会造成卡顿) - -#### 渐变动画 - -this.props.offset: 表示当前SpringScrollView的contentOffset.y的原生动画值,, 你可以使用这个值来自定义你的原生插值动画:: - -举个例子,如果你有个箭头图标,希望在上拉过程中旋转角度,当到达加载状态的时候,完全反转角度,那么你可以这样写 - -```$js - -``` - -完整的示例可以查看[NormalFooter](https://github.com/bolan9999/react-native-spring-scrollview/blob/master/src/NormalFooter.js) - -#### lottie动画支持 -``` -export class CommonLottieFooter extends RefreshHeader { - static height: number = 100; - - render() { - if (this.state.status === "allLoaded") return null; - const { offset, bottomOffset } = this.props; - let progress = offset.interpolate({ - inputRange: [ - bottomOffset + 50, - bottomOffset + 500 - ], - outputRange: [0, 1] - }); - if (this.state.status === "loading") { - progress = undefined; - } - return ( - - - - ); - } -} -``` -完整示例可查看这里[CommonLottieFooter](https://github.com/bolan9999/react-native-spring-scrollview/blob/master/src/Customize/CommonLottieFooter.js) - -### 贡献您的自定义上拉加载组件 - -欢迎Fork react-native-spring-scrollview ,添加您精心制作的LoadingFooter, 提交Pull Request 合并到master,给其他人使用。 diff --git a/docs/zh-cn/V2/CustomRefresh.md b/docs/zh-cn/V2/CustomRefresh.md deleted file mode 100644 index ee3194b..0000000 --- a/docs/zh-cn/V2/CustomRefresh.md +++ /dev/null @@ -1,152 +0,0 @@ -# 自定义下拉刷新 - -在我们自定义下拉刷新之前, 我们需要先了解一个下拉刷新各个状态: - -* "waiting": 准备状态:视图还没有碰边 -* "pulling": 下拉状态:视图已经碰到边缘,但是还没有达到组件的高度,此时松手不具备刷新的条件 -* "pullingEnough": 下拉足够态:视图已经达到组件的高度,但是用户还没有松手,松手即可进入刷新态 -* "pullingCancel": 下拉取消态: 当用户下拉经历过下拉足够态,但是又往上拉,达不到刷新的高度,则进入此状态,如果用户不松手,重新下拉可再次进入下拉足够态 -* "refreshing": 刷新态:已经触发onRefresh,此时正在刷新中 -* "rebound": 回弹态: 已经刷新完成,正在往回弹的状态 - -### 自定义 - -#### 导入 -```$js -import { RefreshHeader } from "react-native-spring-scrollview/RefreshHeader"; -``` - -#### 继承RefreshHeader -```$js -class MyHeader extends RefreshHeader{} -``` - -#### 重写render -```$js -render() { - return {this.state.status} -} -``` - -RefreshHeader自带有两个Props, 和一个状态status,在子类里面可以直接使用 - -* this.props.maxHeight,类型是number, 表示刷新组件的高度 -* this.props.offset,类型是Animated.Value 表示当前SpringScrollView的contentOffset.y(原生动画值) -* this.state.status,类型是HeaderStatus: 表示当前刷新组件正处在的状态 -```$js -export type HeaderStatus = - | "waiting" - | "pulling" - | "pullingEnough" - | "pullingCancel" - | "refreshing" - | "rebound"; -``` - -#### 自定义刷新组件的高度 - -只需要重写静态变量height就可以改变该刷新组件的高度(**请注意这与V1有差别,V2取消了refreshHeaderHeight属性,V2更加注重刷新组件的独立性**): -``` -class MyHeader extends RefreshHeader{ - static height:number = 50; -} -``` - -#### 选择刷新组件的下拉样式 - -只需要重写静态变量style就可以改变刷新组件的样式,默认值是"stickyContent": -``` -class MyHeader extends RefreshHeader{ - static style:string = "stickyContent"; -} -``` - -SpringScrollView目前支持三种样式: - -style | 效果 ----- | ------ -"topping" | ![topping](../../res/RefreshingTopping.gif) -"stickyScrollView" | ![stickyScrollView](../../res/RefreshingStickyScrollView.gif) -"stickyContent" | ![stickyContent](../../res/RefreshingStickyContent.gif) - -#### 将自定义的刷新组件应用到SpringScrollView -```$js - -``` - -完整的示例可以查看[NormalHeader](https://github.com/bolan9999/react-native-spring-scrollview/blob/master/src/NormalHeader.js) - -### 性能优化 - -#### 避免无用的状态改变带来的无用更新 -你可以通过重写onStateChange(oldStatus: HeaderStatus, newStatus: HeaderStatus)来阻止不需要的状态更新带来的re-render - -举个例子,如果你只需要区分正在刷新和没有刷新两种状态,那么你可以像下面这样优化它 -```$js -onStateChange(oldStatus: HeaderStatus, newStatus: HeaderStatus) { - if (oldStatus === "refreshing" || newStatus==="refreshing") { - this.setState({status:newStatus}); - } -} -``` - -除此之外,刷新控件应当设计得足够简单(DOM节点数量不能太多,太多会造成卡顿) - -#### 渐变动画 - -this.props.offset: 表示当前SpringScrollView的contentOffset.y的原生动画值,, 你可以使用这个值来自定义你的动画: - -举个例子,如果你有个箭头图标,希望在下拉过程中旋转角度,当到达刷新状态的时候,完全反转角度,那么你可以这样写 - -```$js - -``` - -完整的示例可以查看[NormalHeader](https://github.com/bolan9999/react-native-spring-scrollview/blob/master/src/NormalHeader.js) - -#### lottie动画支持 - -示例: -``` -export class CommonLottieHeader extends RefreshHeader { - static height: number = 100; - - render() { - let progress = this.props.offset.interpolate({ - inputRange: [-200, -150, -150, -100, -100, -50], - outputRange: [1, 0, 1, 0, 1, 0] - }); - if (this.state.status === "refreshing") { - progress = undefined; - } - return ( - - - - ); - } -} -``` - -完整示例可查看这里[CommonLottieHeader](https://github.com/bolan9999/react-native-spring-scrollview/blob/master/src/Customize/CommonLottieHeader.js) - -### 贡献您的自定义下拉刷新组件 - -欢迎Fork react-native-spring-scrollview ,添加您精心制作的RefreshHeader, 提交Pull Request 合并到master,给其他人使用。 - diff --git a/docs/zh-cn/V2/DetailControl.md b/docs/zh-cn/V2/DetailControl.md deleted file mode 100644 index db536eb..0000000 --- a/docs/zh-cn/V2/DetailControl.md +++ /dev/null @@ -1,11 +0,0 @@ -# 细节控制 - -属性 | 类型 | 默认值 |  作用   ----- | ------ | --------- | -------- -decelerationRate | number | 0.998 | 在内容视图内松开手指,减速滑动的阻尼系数,单位是每毫秒百分比 -decelerationRateWhenOut | number | 0.9 | 超出内容视图以后松开手指,减速滑动的阻尼系数,单位是每毫秒百分比 -dampingCoefficient | number | 0.5 | 超出内容视图以后,继续滑动的阻尼系数,单位是百分比 -reboundEasing | (value: number) => number | Easing.cos | 超出内容视图松开手指完成减速以后的回弹动画函数 -reboundDuration | number | 300 | 回弹的时间 -getNativeOffset | (offset: Animated.Value) => any | ()=>null | 获得监听滑动偏移并支持原生动画的动画值(该值是合成值,不可监听,不可修改,只能用于原生动画,并且在[处理键盘遮挡](TextInput)的偏移中,该值不会改变) -indicatorDismissTimeInterval | number | 3000 | LargeList滚动停止后指示器衰弱隐藏的时间间隔,单位毫秒 diff --git a/docs/zh-cn/V2/Event.md b/docs/zh-cn/V2/Event.md deleted file mode 100644 index 64f655f..0000000 --- a/docs/zh-cn/V2/Event.md +++ /dev/null @@ -1,31 +0,0 @@ -### onTouchBegin : ()=>any -手指按下时回调 -```$js -{ - console.log("onTouchBegin"); -} /> -``` - -### onTouchEnd : ()=>any -手指抬起时回调 -```$js -{ - console.log("onTouchEnd"); -} /> -``` - -### onMomentumScrollBegin : ()=>any -松手后减速开始的回调 -```$js -{ - console.log("onMomentumScrollBegin"); -} /> -``` - -### onMomentumScrollEnd : ()=>any -减速结束回调 -```$js -{ - console.log("onMomentumScrollEnd"); -} /> -``` diff --git a/docs/zh-cn/V2/KnownIssues.md b/docs/zh-cn/V2/KnownIssues.md deleted file mode 100644 index bbc70a8..0000000 --- a/docs/zh-cn/V2/KnownIssues.md +++ /dev/null @@ -1,2 +0,0 @@ -# 已知问题 -1. 不支持与自身嵌套,但是支持与ScrollView嵌套 diff --git a/docs/zh-cn/V2/Loading.md b/docs/zh-cn/V2/Loading.md deleted file mode 100644 index 3724f0b..0000000 --- a/docs/zh-cn/V2/Loading.md +++ /dev/null @@ -1,52 +0,0 @@ -# 上拉加载 - -### 预览 -![Preview](../../res/LoadingStickyContent.gif) - -### 代码 - -导入 - -```$js -import { SpringScrollView } from "react-native-spring-scrollview"; -import { ChineseWithLastDateFooter } from "react-native-spring-scrollview/Customize"; -``` - -使用SpringScrollView可以非常简单地实现上拉加载的功能, 本库默认提供了一个NormalFooter类供用户使用,中文用户推荐使用Customize目录下的ChineseWithLastDateFooter - -```$js - (this._scrollView = ref)} - loadingFooter={ChineseWithLastDateFooter} - allLoaded={this.state.allLoaded} - onLoading={()=>{ - setTimeOut(()=>{ - this._scrollView.endLoading(); - this.setState({...}); - },2000); - }> - - This is a Normal Loading Test - - -``` - - -### 属性 - -属性 | 类型 | 默认值 |  作用   ----- | ------ | --------- | -------- -onLoading | ()=>any | undefined | 上拉加载的回调函数 -allLoaded | boolean | false | 数据是否加载完成。 -loadingFooter | LoadingFooter | NormalFooter | 上拉加载组件,用户如果不希望自定义,则可以使用NormalFooter,如果需要高度自定义,请参看[自定义上拉加载](CustomLoading) - -### 本库提供的额外加载控件 -本库提供了一些加载控件, 用户可以试试 -``` -import {NormalFooter} from "react-native-spring-scrollview/NormalFooter"; -import { - WithLastDateFooter, - ChineseNormalFooter, - ChineseWithLastDateFooter, -} from "react-native-spring-scrollview/Customize"; -``` diff --git a/docs/zh-cn/V2/Refresh.md b/docs/zh-cn/V2/Refresh.md deleted file mode 100644 index e7a8a51..0000000 --- a/docs/zh-cn/V2/Refresh.md +++ /dev/null @@ -1,58 +0,0 @@ -# 下拉刷新 - -### 预览 -![Preview](../../res/RefreshingStickyContent.gif) - -### 导入 - -```$js -import { SpringScrollView } from "react-native-spring-scrollview"; -import { ChineseWithLastDateHeader } from "react-native-spring-scrollview/Customize"; -``` - -使用SpringScrollView可以非常简单地实现下拉刷新的功能, 本库默认提供了一个NormalHeader类供用户使用(在[Customize](https://github.com/bolan9999/react-native-spring-scrollview/tree/master/src/Customize)目录下有提供其他比较常用的下拉刷新组件),中文用户推荐使用ChineseWithLastDateHeader - -### Simple Example - -```$js - (this._scrollView = ref)} - refreshHeader={ChineseWithLastDateHeader} - onRefresh={()=>{ - setTimeOut(()=>{ - this._scrollView.endRefresh(); - setTimeOut(()=>this.setState({prop:"your changed props"})); - },2000); - } - - This is a Normal Refresh Test - - -``` - -属性 | 类型 | 默认值 |  作用   ----- | ------ | --------- | -------- -onRefresh | ()=>any | undefined | 下拉刷新的回调函数,如果设置了此属性,则会在顶部加一个刷新Header -refreshHeader | [RefreshHeader](https://github.com/bolan9999/react-native-spring-scrollview/blob/master/src/RefreshHeader.js) | NormalHeader | 选择下拉刷新的组件,用户如果不希望高度自定义,则可以不设定直接使用NormalHeader,如果需要高度自定义,请参看[自定义下拉刷新](zh-cn/V2/CustomRefresh) - - -**请注意,V2版本取消了refreshHeaderHeight属性,想要自定义刷新组件的高度,请查看[自定义下拉刷新](zh-cn/V2/CustomRefresh)下的[自定义高度](zh-cn/V2/CustomRefresh?id=自定义刷新组件的高度)** - - -### 方法 - -### endRefresh() - -结束刷新,关闭刷新组件。 在onRefresh完成数据请求以后,我们建议您先使用此方法开启结束动画,再更新内容,这样在下拉过程中,动画更流畅( **注意:V2版本已经取消了beginRefresh过程,组件会自动开始刷新** ) - -### 本库提供的额外刷新控件 - -本库提供了一些刷新控件, 用户可以试试 -``` -import {NormalRefresh} from "react-native-spring-scrollview/NormalRefresh"; -import { - WithLastDateHeader, - ChineseNormalHeader, - ChineseWithLastDateHeader, -} from "react-native-spring-scrollview/Customize"; -``` diff --git a/docs/zh-cn/V2/Scroll.md b/docs/zh-cn/V2/Scroll.md deleted file mode 100644 index c968771..0000000 --- a/docs/zh-cn/V2/Scroll.md +++ /dev/null @@ -1,70 +0,0 @@ -# 滑动 - -要使用代码滑动到指定位置,非常简单: - -### 第一步,获取SpringScrollView的引用 -```$js -(this._scrollView = ref)} /> -``` - -### 第二步,使用scrollTo方法 -```$js -this._scrollView && this._scrollView.scrollTo({x:0,y:100}).then().catch(); -``` -### 可用滑动方法 -scrollTo({x:number, y:number}, animated:boolean=true):Promise<void> - -滑动到指定的偏移 - -scroll({x:number, y:number}, animated:boolean=true):Promise<void> - -在当前位置上滑动指定的偏移,请注意scroll参数是偏移值,scrollTo是目标值 - -scrollToBegin(animated:boolean=true):Promise<void> - -滑动到{x:0,y:0}的位置 - -scrollToEnd(animated: boolean = true):Promise<void> - -滑动到最右下角位置 - - -# Javascript端监听滑动 - -### onScroll : ({nativeEvent:{contentOffset:{x:number, y:number}}})=>any - -```$js -{ - console.log("offset : x=", x, "y=", y); -}/> -``` - -注意: - -* y值是有可能超出内容范围之外的 -* 不要使用Animated.createAnimatedComponent,SpringScrollView本身支持所有的Animated.View的属性,如果需要高性能的监听偏移,请使用下面的原生动画驱动 - -# 监听原生偏移值 - -### onNativeContentOffsetExtract : {x?:Animated.Value, y?:Animated.Value} - -使用原生动画值监听滑动偏移,可以用作插值动画 -下面是一个简单的吸住SpringScrollView的示例 -```$js -_nativeOffset = { - y: new Animated.Value(0) -}; - -render(){ - return - - -} - -``` - - - - - - diff --git a/docs/zh-cn/V2/TextInput.md b/docs/zh-cn/V2/TextInput.md deleted file mode 100644 index d09ca98..0000000 --- a/docs/zh-cn/V2/TextInput.md +++ /dev/null @@ -1,52 +0,0 @@ -# 处理键盘遮挡 - -移动APP经常会遇到一个尴尬的问题,输入框的键盘遮挡问题。不用担心,使用SpringScrollView能够很轻松的处理键盘遮挡问题。 - -### 第一步:创建ReactRef引用 -```$js -_ref = React.createRef(); -``` - -### 第二步:让ref指向TextInput -```$js - - - ...//Other content - - - ); - } -} -``` - -具体参见[InputExample](https://github.com/bolan9999/react-native-spring-scrollview/blob/master/Examples/InputExample.js) - - - diff --git a/docs/zh-cn/V2/Usage.md b/docs/zh-cn/V2/Usage.md deleted file mode 100644 index 13525c6..0000000 --- a/docs/zh-cn/V2/Usage.md +++ /dev/null @@ -1,34 +0,0 @@ -# 简单使用 - -导入: -```$js -import { SpringScrollView } from "react-native-spring-scrollview"; -``` - -使用下面的JS代码检查是否接入成功, 详见 [Examples](https://github.com/bolan9999/react-native-spring-scrollview/tree/master/Examples) - -```$js -export class BouncesAndScrollEnabledExample extends React.Component { - _contentCount = 20; - render() { - const arr = []; - for (let i = 0; i < this._contentCount; ++i) arr.push(i); - return ( - - {arr.map((i, index) => - - Modify the '_contentCount','_bounces' and '_scrollEnabled' in - BouncesExample.js to check if VerticalScrollView works well. - - )} - - ); - } -} -const styles = StyleSheet.create({ - text:{ - fontSize:16, - margin:20 - } -}); -``` diff --git a/index.d.ts b/index.d.ts new file mode 100644 index 0000000..97f5d8d --- /dev/null +++ b/index.d.ts @@ -0,0 +1,134 @@ +/** + * Author: Shi(bolan0000@icloud.com) + * Date: 2018/7/26 + * Copyright (c) 2018, AoTang, Inc. + * + * Description: + */ + +declare module 'react-native-spring-scrollview' { + import {Animated, ViewProps, ViewStyle} from 'react-native'; + import * as React from 'react'; + + export interface Offset { + x: number; + y: number; + } + + export interface Size { + width: number; + height: number; + } + + export interface NativeContentOffset { + x?: Animated.Value; + y?: Animated.Value; + } + + export type RefreshStyle = 'topping' | 'stickyScrollView' | 'stickyContent'; + + export type LoadingStyle = 'bottoming' | 'stickyScrollView' | 'stickyContent'; + + export interface ScrollEvent { + nativeEvent: { + contentOffset: { + x: number; + y: number; + }; + }; + } + + export type HeaderStatus = + | 'waiting' + | 'pulling' + | 'pullingEnough' + | 'pullingCancel' + | 'refreshing' + | 'rebound'; + + export interface RefreshHeaderPropType { + maxHeight: number; + offset: Animated.Value; + } + export interface RefreshHeaderStateType { + status: HeaderStatus; + } + export class RefreshHeader extends React.Component< + RefreshHeaderPropType, + RefreshHeaderStateType + > {} + + export class NormalHeader extends RefreshHeader {} + + export type FooterStatus = + | 'waiting' + | 'dragging' + | 'draggingEnough' + | 'draggingCancel' + | 'releaseRebound' + | 'loading' + | 'rebound' + | 'allLoaded'; + + export interface LoadingFooterPropType { + maxHeight: number; + offset: Animated.Value; + bottomOffset: number; + } + + export interface LoadingFooterStateType { + status: FooterStatus; + } + + export class LoadingFooter extends React.Component< + LoadingFooterPropType, + LoadingFooterStateType + > {} + + export class NormalFooter extends LoadingFooter {} + + export interface SpringScrollViewPropType extends ViewProps { + contentStyle?: ViewStyle; + bounces?: boolean; + scrollEnabled?: boolean; + pagingEnabled?: boolean; + pageSize?: Size; + decelerationRate?: number; + directionalLockEnabled?: boolean; + initialContentOffset?: Offset; + showsVerticalScrollIndicator?: boolean; + showsHorizontalScrollIndicator?: boolean; + refreshHeader?: React.ComponentClass< + RefreshHeaderPropType, + RefreshHeaderStateType + >; + loadingFooter?: React.ComponentClass< + LoadingFooterPropType, + LoadingFooterStateType + >; + onRefresh?: () => any; + onLoading?: () => any; + allLoaded?: boolean; + textInputRefs?: any[]; + inputToolBarHeight?: number; + dragToHideKeyboard?: boolean; + onTouchBegin?: () => any; + onTouchEnd?: () => any; + inverted?: boolean; + onMomentumScrollBegin?: () => any; + onMomentumScrollEnd?: () => any; + onScroll?: (evt: ScrollEvent) => any; + onNativeContentOffsetExtract?: NativeContentOffset; + onSizeChange?: (size: Size) => any; + onContentSizeChange?: (size: Size) => any; + } + export class SpringScrollView extends React.PureComponent { + scrollTo(offset: Offset, animated?: boolean): Promise; + scroll(offset: Offset, animated?: boolean): Promise; + scrollToBegin(animated?: boolean): Promise; + scrollToEnd(animated?: boolean): Promise; + beginRefresh(): Promise; + endRefresh(): void; + endLoading(rebound: boolean): void; + } +} diff --git a/index.js b/index.js index 43da39b..7e95307 100644 --- a/index.js +++ b/index.js @@ -14,4 +14,11 @@ import {AppRegistry} from 'react-native'; import {Examples} from './Examples'; import {name} from './package.json'; -AppRegistry.registerComponent(name, () => Examples); \ No newline at end of file +export * from "./src/SpringScrollView"; +export * from "./src/Types"; +export * from "./src/RefreshHeader"; +export * from "./src/LoadingFooter"; +export * from "./src/NormalHeader"; +export * from "./src/NormalFooter"; + +AppRegistry.registerComponent(name, () => Examples); diff --git a/ios/RNSpringScrollView.podspec b/ios/RNSpringScrollView.podspec new file mode 100644 index 0000000..fa2bf50 --- /dev/null +++ b/ios/RNSpringScrollView.podspec @@ -0,0 +1,18 @@ +require "json" + +package = JSON.parse(File.read(File.join(__dir__, "..", "package.json"))) + +Pod::Spec.new do |s| + s.name = "RNSpringScrollView" + s.version = package["version"] + s.summary = package["description"] + s.homepage = "https://github.com/skillz/react-native-spring-scrollview" + s.license = package["license"] + s.author = { "skillz" => "sdk@skillz.com" } + s.platforms = { :ios => "7.0", :tvos => "9.0" } + s.source = { :git => "https://github.com/skillz/react-native-spring-scrollview.git", :tag => s.version } + s.source_files = "SpringScrollView/**/*.{h,m}" + s.requires_arc = true + + s.dependency "React" +end diff --git a/src/ios/RNSpringScrollView.xcodeproj/project.pbxproj b/ios/RNSpringScrollView.xcodeproj/project.pbxproj similarity index 100% rename from src/ios/RNSpringScrollView.xcodeproj/project.pbxproj rename to ios/RNSpringScrollView.xcodeproj/project.pbxproj diff --git a/ios/RNSpringScrollView.xcworkspace/contents.xcworkspacedata b/ios/RNSpringScrollView.xcworkspace/contents.xcworkspacedata new file mode 100644 index 0000000..217f5f4 --- /dev/null +++ b/ios/RNSpringScrollView.xcworkspace/contents.xcworkspacedata @@ -0,0 +1,9 @@ +// !$*UTF8*$! + + + + + + \ No newline at end of file diff --git a/src/ios/SpringScrollView/STSpringScrollContentViewManager.h b/ios/SpringScrollView/STSpringScrollContentViewManager.h similarity index 100% rename from src/ios/SpringScrollView/STSpringScrollContentViewManager.h rename to ios/SpringScrollView/STSpringScrollContentViewManager.h diff --git a/src/ios/SpringScrollView/STSpringScrollContentViewManager.m b/ios/SpringScrollView/STSpringScrollContentViewManager.m similarity index 100% rename from src/ios/SpringScrollView/STSpringScrollContentViewManager.m rename to ios/SpringScrollView/STSpringScrollContentViewManager.m diff --git a/src/ios/SpringScrollView/STSpringScrollView.h b/ios/SpringScrollView/STSpringScrollView.h similarity index 100% rename from src/ios/SpringScrollView/STSpringScrollView.h rename to ios/SpringScrollView/STSpringScrollView.h diff --git a/src/ios/SpringScrollView/STSpringScrollView.m b/ios/SpringScrollView/STSpringScrollView.m similarity index 100% rename from src/ios/SpringScrollView/STSpringScrollView.m rename to ios/SpringScrollView/STSpringScrollView.m diff --git a/src/ios/SpringScrollView/STSpringScrollViewManager.h b/ios/SpringScrollView/STSpringScrollViewManager.h similarity index 100% rename from src/ios/SpringScrollView/STSpringScrollViewManager.h rename to ios/SpringScrollView/STSpringScrollViewManager.h diff --git a/src/ios/SpringScrollView/STSpringScrollViewManager.m b/ios/SpringScrollView/STSpringScrollViewManager.m similarity index 100% rename from src/ios/SpringScrollView/STSpringScrollViewManager.m rename to ios/SpringScrollView/STSpringScrollViewManager.m diff --git a/package.json b/package.json index 1b523fb..824097c 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,8 @@ { - "name": "SSVExample", - "version": "0.0.1", + "name": "react-native-spring-scrollview", + "version": "3.0.2", "private": true, + "description": "An cross-platform (iOS & Android) spring ScrollView", "scripts": { "android": "react-native run-android", "ios": "react-native run-ios", @@ -9,12 +10,18 @@ "test": "jest", "lint": "eslint ." }, + "author": "bolan9999 ", + "license": "MIT", + "peerDependencies": { + "react": "17.0.1", + "react-native": "0.65.1", + "lottie-react-native": "latest" + }, "dependencies": { "@react-native-async-storage/async-storage": "^1.15.5", - "lottie-ios": "3.1.8", - "lottie-react-native": "^4.0.2", + "lottie-react-native": "git://github.com/skillz/lottie-react-native.git#3bf1b7c2486bdb5009d850e16e0ba8b867c25fdb", "react": "17.0.1", - "react-native": "0.64.2" + "react-native": "0.65.1" }, "devDependencies": { "@babel/core": "^7.12.9", diff --git a/src/.gitattributes b/src/.gitattributes deleted file mode 100644 index d42ff18..0000000 --- a/src/.gitattributes +++ /dev/null @@ -1 +0,0 @@ -*.pbxproj -text diff --git a/src/.npmignore b/src/.npmignore deleted file mode 100644 index 86278d0..0000000 --- a/src/.npmignore +++ /dev/null @@ -1,57 +0,0 @@ -# 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 - -# Android/IntelliJ -# -android/build/ -build/ -.idea -.gradle -local.properties -*.iml - -# node.js -# -node_modules/ -npm-debug.log -yarn-error.log - -# BUCK -buck-out/ -\.buckd/ -*.keystore - -# fastlane -# -# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the -# screenshots whenever they are needed. -# For more information about the recommended setup visit: -# https://docs.fastlane.tools/best-practices/source-control/ - -*/fastlane/report.xml -*/fastlane/Preview.html -*/fastlane/screenshots - -# Bundle artifact -*.jsbundle diff --git a/src/RNSpringScrollView.podspec b/src/RNSpringScrollView.podspec index f56fa98..c39179e 100644 --- a/src/RNSpringScrollView.podspec +++ b/src/RNSpringScrollView.podspec @@ -6,11 +6,11 @@ Pod::Spec.new do |s| s.name = "RNSpringScrollView" s.version = package["version"] s.summary = package["description"] - s.homepage = "https://github.com/bolan9999/react-native-spring-scrollview" + s.homepage = "https://github.com/skillz/react-native-spring-scrollview" s.license = package["license"] - s.author = { "bolan9999" => "shanshang130@gmail.com" } + s.author = { "skillz" => "sdk@skillz.com" } s.platforms = { :ios => "7.0", :tvos => "9.0" } - s.source = { :git => "https://github.com/bolan9999/react-native-spring-scrollview.git", :tag => s.version } + s.source = { :git => "https://github.com/skillz/react-native-spring-scrollview.git", :tag => s.version } s.source_files = "ios/SpringScrollView/**/*.{h,m}" s.requires_arc = true diff --git a/src/android/build.gradle b/src/android/build.gradle index 1104c98..29f441c 100644 --- a/src/android/build.gradle +++ b/src/android/build.gradle @@ -9,19 +9,19 @@ buildscript { } dependencies { - classpath 'com.android.tools.build:gradle:4.1.1' + classpath 'com.android.tools.build:gradle:4.1.3' } } apply plugin: 'com.android.library' android { - compileSdkVersion safeExtGet('compileSdkVersion', 26) + compileSdkVersion safeExtGet('compileSdkVersion', 29) publishNonDefault true defaultConfig { - minSdkVersion safeExtGet('minSdkVersion', 20) - targetSdkVersion safeExtGet('targetSdkVersion', 26) + minSdkVersion safeExtGet('minSdkVersion', 24) + targetSdkVersion safeExtGet('targetSdkVersion', 29) } lintOptions { abortOnError false @@ -29,10 +29,13 @@ android { } repositories { + jcenter() + google() mavenCentral() + maven { url 'http://nexus.skillz.com/content/groups/public' } } dependencies { - api 'com.facebook.react:react-native:+' + api 'com.facebook.react:react-native:0.65.1' } \ No newline at end of file diff --git a/src/android/react-native-spring-scroll-view.iml b/src/android/react-native-spring-scroll-view.iml deleted file mode 100644 index e6e0bd6..0000000 --- a/src/android/react-native-spring-scroll-view.iml +++ /dev/null @@ -1,140 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file