|
@ -1,4 +1,4 @@ |
|
|
import React, {Component} from 'react'; |
|
|
import React, {Component, createRef} from 'react'; |
|
|
import { |
|
|
import { |
|
|
View, |
|
|
View, |
|
|
ScrollView, |
|
|
ScrollView, |
|
@ -10,13 +10,21 @@ import { |
|
|
Dimensions, |
|
|
Dimensions, |
|
|
} from 'react-native'; |
|
|
} from 'react-native'; |
|
|
import YooForumTopic from '../component/YooForumTopic'; |
|
|
import YooForumTopic from '../component/YooForumTopic'; |
|
|
|
|
|
import YooReply from './YooReply'; |
|
|
|
|
|
|
|
|
const screenWidth = Dimensions.get('window').width; |
|
|
const screenWidth = Dimensions.get('window').width; |
|
|
|
|
|
const screenHeight = Dimensions.get('window').height; |
|
|
const AnimatedScrollView = Animated.createAnimatedComponent(ScrollView); |
|
|
const AnimatedScrollView = Animated.createAnimatedComponent(ScrollView); |
|
|
const styles = StyleSheet.create({ |
|
|
const styles = StyleSheet.create({ |
|
|
container: { |
|
|
container: { |
|
|
width: screenWidth * 2, |
|
|
width: screenWidth * 2, |
|
|
}, |
|
|
}, |
|
|
|
|
|
repliesContainer: { |
|
|
|
|
|
position: 'absolute', |
|
|
|
|
|
left: screenWidth, |
|
|
|
|
|
width: screenWidth, |
|
|
|
|
|
height: screenHeight - 124, |
|
|
|
|
|
}, |
|
|
hintContainer: { |
|
|
hintContainer: { |
|
|
flex: 1, |
|
|
flex: 1, |
|
|
alignItems: 'center', |
|
|
alignItems: 'center', |
|
@ -44,13 +52,23 @@ export default class YooForumUI extends Component { |
|
|
scrollEnabled: true, |
|
|
scrollEnabled: true, |
|
|
currentPosition: 0, |
|
|
currentPosition: 0, |
|
|
translateX: new Animated.Value(0), |
|
|
translateX: new Animated.Value(0), |
|
|
|
|
|
currentReplies: [], |
|
|
|
|
|
replyTranslateY: new Animated.Value(0), |
|
|
}; |
|
|
}; |
|
|
|
|
|
this.replyRef = createRef(); |
|
|
this.showDetail = this.showDetail.bind(this); |
|
|
this.showDetail = this.showDetail.bind(this); |
|
|
this.hideDetail = this.hideDetail.bind(this); |
|
|
this.hideDetail = this.hideDetail.bind(this); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
showDetail(translate, layoutY, onAnimationFinished) { |
|
|
showDetail(translate, layoutY, onAnimationFinished, replies) { |
|
|
this.setState({scrollEnabled: false}); |
|
|
this.replyRef.current.scrollTo({x: 0, y: 0, animated: false}); |
|
|
|
|
|
this.setState({ |
|
|
|
|
|
scrollEnabled: false, |
|
|
|
|
|
currentReplies: replies, |
|
|
|
|
|
}); |
|
|
|
|
|
this.state.replyTranslateY.setValue( |
|
|
|
|
|
this.state.currentPosition + 100 + screenHeight, |
|
|
|
|
|
); |
|
|
Animated.parallel([ |
|
|
Animated.parallel([ |
|
|
Animated.timing(translate, { |
|
|
Animated.timing(translate, { |
|
|
toValue: { |
|
|
toValue: { |
|
@ -65,6 +83,12 @@ export default class YooForumUI extends Component { |
|
|
duration: 250, |
|
|
duration: 250, |
|
|
useNativeDriver: true, |
|
|
useNativeDriver: true, |
|
|
}), |
|
|
}), |
|
|
|
|
|
Animated.timing(this.state.replyTranslateY, { |
|
|
|
|
|
toValue: this.state.currentPosition + 100, |
|
|
|
|
|
duration: 250, |
|
|
|
|
|
delay: 250, |
|
|
|
|
|
useNativeDriver: true, |
|
|
|
|
|
}), |
|
|
]).start(onAnimationFinished); |
|
|
]).start(onAnimationFinished); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
@ -84,6 +108,11 @@ export default class YooForumUI extends Component { |
|
|
duration: 250, |
|
|
duration: 250, |
|
|
useNativeDriver: true, |
|
|
useNativeDriver: true, |
|
|
}), |
|
|
}), |
|
|
|
|
|
Animated.timing(this.state.replyTranslateY, { |
|
|
|
|
|
toValue: this.state.currentPosition + 100 + screenHeight, |
|
|
|
|
|
duration: 250, |
|
|
|
|
|
useNativeDriver: true, |
|
|
|
|
|
}), |
|
|
]).start(onAnimationFinished); |
|
|
]).start(onAnimationFinished); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
@ -127,6 +156,16 @@ export default class YooForumUI extends Component { |
|
|
/> |
|
|
/> |
|
|
</View> |
|
|
</View> |
|
|
)} |
|
|
)} |
|
|
|
|
|
<AnimatedScrollView |
|
|
|
|
|
ref={this.replyRef} |
|
|
|
|
|
style={[ |
|
|
|
|
|
styles.repliesContainer, |
|
|
|
|
|
{transform: [{translateY: this.state.replyTranslateY}]}, |
|
|
|
|
|
]}> |
|
|
|
|
|
{this.state.currentReplies.map((reply, key) => ( |
|
|
|
|
|
<YooReply key={key} reply={reply} /> |
|
|
|
|
|
))} |
|
|
|
|
|
</AnimatedScrollView> |
|
|
</AnimatedScrollView> |
|
|
</AnimatedScrollView> |
|
|
); |
|
|
); |
|
|
} |
|
|
} |
|
|