Commit d0704c2

committed

add LottieRefreshControl

1 parent 3b167c1 commit d0704c2Copy full SHA for d0704c2

File tree

+4312

-0

lines changed

+4312

-0

lines changed

Lines changed: 40 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,40 @@`
	`1`	`+import React, {Component} from 'react';`
	`2`	`+import {StyleSheet, View, Text,ListView,ScrollView} from 'react-native';`
	`3`	`+import PropTypes from 'prop-types';`
	`4`	`+import HuaWeiRefreshControl from './HuaWeiRefreshControl';`
	`5`	`+import LottieRefreshControl from "./LottieRefreshControl";`
	`6`	`+`
	`7`	`+export default class LottieListViewExample extends Component {`
	`8`	`+ constructor(props){`
	`9`	`+ super(props);`
	`10`	`+ var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});`
	`11`	`+ this.state = {`
	`12`	`+ dataSource: ds.cloneWithRows(['row 1', 'row 2','row 3','row 4','row 5','row 6','row 7','row 8']),`
	`13`	`+ };`
	`14`	`+ }`
	`15`	`+ _onRefresh=()=>{`
	`16`	`+ setTimeout(()=>{`
	`17`	`+ this._hw && this._hw.finishRefresh()`
	`18`	`+ },1000)`
	`19`	`+ }`
	`20`	`+ render() {`
	`21`	`+ return (`
	`22`	`+ <View style={{flex: 1}}>`
	`23`	`+ <ListView`
	`24`	`+ dataSource={this.state.dataSource}`
	`25`	`+ renderRow={(rowData) => <Text onPress={()=>alert(111)} style={{height:100}}>{rowData}</Text>}`
	`26`	`+ renderScrollComponent={props=><ScrollView`
	`27`	`+ style={{flex:1}}`
	`28`	`+ refreshControl={`
	`29`	`+ <LottieRefreshControl`
	`30`	`+ ref={ref=>this._hw = ref}`
	`31`	`+ onRefresh={this._onRefresh}`
	`32`	`+ />`
	`33`	`+ }`
	`34`	`+ {...props}`
	`35`	`+ />}`
	`36`	`+ />`
	`37`	`+ </View>`
	`38`	`+ )`
	`39`	`+ }`
	`40`	`+}`

Lines changed: 43 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,43 @@`
	`1`	`+/**`
	`2`	`+ * 类似华为手机的下拉刷新`
	`3`	`+ */`
	`4`	`+import React, {Component} from 'react';`
	`5`	`+import {`
	`6`	`+ StyleSheet,`
	`7`	`+ View,`
	`8`	`+ Text,`
	`9`	`+ Animated,`
	`10`	`+ Easing`
	`11`	`+} from 'react-native';`
	`12`	`+import PropTypes from 'prop-types';`
	`13`	`+import LottieView from 'lottie-react-native'`
	`14`	`+import {SmartRefreshControl, AnyHeader} from 'react-native-smartrefreshlayout';`
	`15`	`+import Icon from 'react-native-vector-icons/Ionicons';`
	`16`	`+import {SkypeIndicator} from 'react-native-indicators';`
	`17`	`+`
	`18`	`+const AnimatedIcon = Animated.createAnimatedComponent(Icon);`
	`19`	`+export default class LottieRefreshControl extends Component {`
	`20`	`+ _onRefresh = () => {`
	`21`	`+ let {onRefresh} = this.props;`
	`22`	`+ onRefresh && onRefresh();`
	`23`	`+ }`
	`24`	`+ finishRefresh=(params)=>{`
	`25`	`+ this._refreshc && this._refreshc.finishRefresh(params)`
	`26`	`+ }`
	`27`	`+ render() {`
	`28`	`+ return (`
	`29`	`+ <SmartRefreshControl`
	`30`	`+ style={{flex:1}}`
	`31`	`+ ref={ref => this._refreshc = ref}`
	`32`	`+ children={this.props.children}`
	`33`	`+ onRefresh={this._onRefresh}`
	`34`	`+ headerHeight={100}`
	`35`	`+ HeaderComponent={`
	`36`	`+ <AnyHeader style={{height:100,justifyContent:'center',alignItems:'center'}}>`
	`37`	`+ <LottieView style={{width:100,height:100}} hardwareAccelerationAndroid autoPlay source={require('./loop.json')} speed={1.5} />`
	`38`	`+ </AnyHeader>`
	`39`	`+ }`
	`40`	`+ />`
	`41`	`+ )`
	`42`	`+ }`
	`43`	`+}`

Comments

(0)