Skip to content

Commit 1e75ff0

Browse files
25342908082534290808
authored
Merge branch 'master' into patch-2
2 parents 303e427 + b002ebf commit 1e75ff0

17 files changed

+399
-39
lines changed

‎Example/App.js‎

Lines changed: 5 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,7 @@ import {
99
Platform,
1010
StyleSheet,
1111
Text,
12-
View,
13-
Button,
12+
View, Button,SafeAreaView
1413
} from 'react-native';
1514
import HuaWeiRefreshControl from './HuaWeiRefreshControl'
1615
const instructions = Platform.select({
@@ -20,42 +19,14 @@ const instructions = Platform.select({
2019
'Shake or press menu button for dev menu',
2120
});
2221
import {ScrollView} from 'react-native-mjrefresh'
22+
import LottieListViewExample from "./LottieListViewExample";
23+
import ListViewExample from "./ListViewExample";
24+
import FlatListExample from "./FlatListExample";
2325
type Props = {};
2426
export default class App extends Component<Props> {
2527
render() {
2628
return (
27-
<View style={{flex:1}}>
28-
<ScrollView
29-
//contentContainerStyle={{paddingVertical:50}}
30-
style={{flex:1}}
31-
scrollEventThrottle={16}
32-
onScroll={e=>console.log(e.nativeEvent)}
33-
refreshControl={<HuaWeiRefreshControl
34-
ref={ref=>this._hw = ref}
35-
onRefresh={()=>{
36-
setTimeout(()=>{
37-
this._hw.finishRefresh();
38-
},1000)
39-
}}
40-
/>}
41-
>
42-
43-
<View style={styles.container}>
44-
<Text style={styles.welcome}>
45-
Welcome to React Native!
46-
</Text>
47-
<Text style={styles.instructions}>
48-
To get started, edit App.js
49-
</Text>
50-
<Text style={styles.instructions}>
51-
{instructions}
52-
</Text>
53-
<Button title='beginRefresh' onPress={()=>{
54-
this._hw.beginRefresh()
55-
}}/>
56-
</View>
57-
</ScrollView>
58-
</View>
29+
<FlatListExample/>
5930
);
6031
}
6132
}

‎Example/FlatListExample.js‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import React, {Component} from 'react';
2+
import {StyleSheet, View, Text,ListView,FlatList} from 'react-native';
3+
import PropTypes from 'prop-types';
4+
import HuaWeiRefreshControl from './HuaWeiRefreshControl';
5+
import {ScrollView} from 'react-native-mjrefresh'
6+
7+
export default class FlatListExample extends Component {
8+
constructor(props){
9+
super(props);
10+
this.state = {
11+
data: ['row 1', 'row 2','row 3','row 4','row 5','row 6','row 7','row 8'],
12+
};
13+
}
14+
_onRefresh=()=>{
15+
setTimeout(()=>{
16+
this._hw && this._hw.finishRefresh()
17+
},1000)
18+
}
19+
render() {
20+
return (
21+
<View style={{flex: 1}}>
22+
<FlatList
23+
keyExtractor={(item)=>item}
24+
data={this.state.data}
25+
renderItem={({item,index}) => <Text key={index} onPress={()=>alert(111)} style={{height:100}}>{item}</Text>}
26+
renderScrollComponent={props=><ScrollView
27+
style={{flex:1}}
28+
refreshControl={
29+
<HuaWeiRefreshControl
30+
ref={ref=>this._hw = ref}
31+
onRefresh={this._onRefresh}
32+
/>
33+
}
34+
{...props}
35+
/>}
36+
/>
37+
</View>
38+
)
39+
}
40+
}

‎Example/ListViewExample.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import React, {Component} from 'react';
2+
import {StyleSheet, View, Text} from 'react-native';
3+
import PropTypes from 'prop-types';
4+
import HuaWeiRefreshControl from './HuaWeiRefreshControl';
5+
import {ScrollView,ListView} from 'react-native-mjrefresh'
6+
7+
export default class ListViewExample 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+
refreshControl={
28+
<HuaWeiRefreshControl
29+
ref={ref=>this._hw = ref}
30+
onRefresh={this._onRefresh}
31+
/>
32+
}
33+
{...props}
34+
/>}
35+
/>
36+
</View>
37+
)
38+
}
39+
}

‎Example/LottieListViewExample.js‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import React, {Component} from 'react';
2+
import {StyleSheet, View, Text} from 'react-native';
3+
import PropTypes from 'prop-types';
4+
import HuaWeiRefreshControl from './HuaWeiRefreshControl';
5+
import {ScrollView,ListView} from 'react-native-mjrefresh'
6+
import LottieRefreshControl from "./LottieRefreshControl";
7+
8+
export default class LottieListViewExample extends Component {
9+
constructor(props){
10+
super(props);
11+
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
12+
this.state = {
13+
dataSource: ds.cloneWithRows(['row 1', 'row 2','row 3','row 4','row 5','row 6','row 7','row 8']),
14+
};
15+
}
16+
_onRefresh=()=>{
17+
setTimeout(()=>{
18+
this._hw && this._hw.finishRefresh()
19+
},1000)
20+
}
21+
render() {
22+
return (
23+
<View style={{flex: 1}}>
24+
<ListView
25+
dataSource={this.state.dataSource}
26+
renderRow={(rowData) => <Text onPress={()=>alert(111)} style={{height:100}}>{rowData}</Text>}
27+
renderScrollComponent={props=><ScrollView
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+
}

‎Example/LottieRefreshControl.js‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import React, {Component} from 'react';
2+
import {StyleSheet, View, Text,Animated,Easing,Dimensions,Image,TouchableWithoutFeedback} from 'react-native';
3+
import MJRefresh from 'react-native-mjrefresh';
4+
import LottieView from 'lottie-react-native'
5+
export default class LottieRefreshControl extends Component {
6+
state = {
7+
scale: new Animated.Value(0.1)
8+
}
9+
_onRefresh = () => {
10+
let {onRefresh} = this.props;
11+
onRefresh && onRefresh();
12+
this.lottieView.play(this.state.scale.__getValue())
13+
}
14+
_onPulling=(event)=>{
15+
let {percent} = event.nativeEvent;
16+
if(percent<=1) {
17+
this.state.scale.setValue(event.nativeEvent.percent);
18+
}
19+
}
20+
finishRefresh=()=>{
21+
this._mjrefresh && this._mjrefresh.finishRefresh();
22+
this.lottieView.reset();
23+
}
24+
beginRefresh=()=>{
25+
this._mjrefresh && this._mjrefresh.beginRefresh();
26+
}
27+
render() {
28+
return (
29+
<MJRefresh
30+
ref={ref=>this._mjrefresh = ref}
31+
onRefresh={this._onRefresh}
32+
onPulling={this._onPulling}
33+
// style={{backgroundColor:'transparent'}}
34+
>
35+
<View style={{
36+
height: 100,
37+
flexDirection: 'row',
38+
alignItems: 'center',
39+
justifyContent: 'center',
40+
}}>
41+
<Animated.View style={{height:100,justifyContent:'center',alignItems:'center',transform: [{
42+
scale:this.state.scale.interpolate({
43+
inputRange: [0,1,2],
44+
outputRange: [0.1,1,1],
45+
})
46+
}]}}>
47+
<LottieView speed={2} ref={obj =>this.lottieView = obj} style={{width:100,height:100}} hardwareAccelerationAndroid progress={this.state.scale} source={require('./cycle_animation.json')} />
48+
</Animated.View>
49+
</View>
50+
</MJRefresh>
51+
)
52+
}
53+
}

‎Example/android/app/build.gradle‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,7 @@ android {
137137
}
138138

139139
dependencies {
140+
compile project(':lottie-react-native')
140141
compile project(':react-native-vector-icons')
141142
compile fileTree(dir: "libs", include: ["*.jar"])
142143
compile "com.android.support:appcompat-v7:23.0.1"

‎Example/android/app/src/main/java/com/example/MainApplication.java‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
import android.app.Application;
44

55
import com.facebook.react.ReactApplication;
6+
import com.airbnb.android.react.lottie.LottiePackage;
67
import com.oblador.vectoricons.VectorIconsPackage;
78
import com.facebook.react.ReactNativeHost;
89
import com.facebook.react.ReactPackage;
@@ -24,6 +25,7 @@ public boolean getUseDeveloperSupport() {
2425
protected List<ReactPackage> getPackages() {
2526
return Arrays.<ReactPackage>asList(
2627
new MainReactPackage(),
28+
new LottiePackage(),
2729
new VectorIconsPackage()
2830
);
2931
}

‎Example/android/settings.gradle‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
rootProject.name = 'Example'
2+
include ':lottie-react-native'
3+
project(':lottie-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/lottie-react-native/src/android')
24
include ':react-native-vector-icons'
35
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
46

‎Example/cycle_animation.json‎

Lines changed: 1 addition & 0 deletions
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)