[英]execute a jQuery slideUp event when screen width exceeds a certain value
[英]Check if PanResponder value exceeds View width
我正在我的componentWillMount
方法中创建PanResponder
componentWillMount() {
this._panResponder = PanResponder.create({
onMoveShouldSetResponderCapture: () => true,
onMoveShouldSetPanResponderCapture: () => true,
onPanResponderMove: Animated.event([null, { dx: this.state.pan }]),
onPanResponderRelease: (e, {vx, vy}) => {
// here I want to check if pan exceeded the width of the View container
]
});
}
问题是我不知道如何检测宽度的大小。
在我的render
方法中,我可以做这样的事情
return (
<View onLayout={event => this.setState({ viewWidth: event.nativeEvent.layout.width })}>
..
</View>
);
但我不能访问this.state.viewWidth
在componentWillMount
,由于被安装在视图之前方法仅呈现。
我试图制作一个从左到右的滑块,所以我需要一个最小和最大X值,其中最小X值就是0。
所以在定义位置时,我正在使用
// Current position
const left = pan.interpolate({
inputRange: [0, viewWidth],
outputRange: [0, viewWidth],
extrapolate: 'clamp'
});
return (
<View style={styles.container}>
<View style={{ position: 'absolute', left, width: 100, height: 100 , backgroundColor: 'red' }} />
</View>
);
但是也许可以用0
和1
作为值来进行不同的处理,所以我在onPanResponderRelease
可以简单地检查pan
值是否超过1
?
我会将viewWidth
状态初始化为false
,并使用componentDidUpdate
初始化PanResponder
。 只需检查是否设置了state.viewWidth
,并且它不在prevState.viewWidth
:
componentDidUpdate(prevProps, prevState) {
if (this.state.viewWidth && prevState.viewWidth === false) {
this._panResponder = PanResponder.create({
onMoveShouldSetResponderCapture: () => true,
onMoveShouldSetPanResponderCapture: () => true,
onPanResponderMove: Animated.event([null, { dx: this.state.pan }]),
onPanResponderRelease: (e, {vx, vy}) => {
// here I want to check if pan exceeded the width of the View container
});
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.