javascript - 如何在 React Native 的 ScrollView 中使用动画视图?
问题描述
对于我的 Flatlist 中的每个视图,它都具有滑动功能,因此如果用户向左滑动,他们可以选择删除该购物车。当我有很长的购物车列表时,尽管它们不会垂直滚动。就好像触摸被各个购物车视图的滑动逻辑所吸引。如何在保留 ScrollView 功能的同时保留单个视图的单个动画滑动功能?
父级:CartSummary 组件包含购物车视图
<ScrollView>
<FlatList
data={availableCarts}
keyExtractor={(item, index) => (item && item.customer) ? item.customer.customerId : index.toString()}
renderItem={({item}) => <CartSummary cart={item} onSelect={this.selectCart} />}
/>
</ScrollView>
这是 CartSummary 组件:
类 CartSummary 扩展组件 { cartXPos = new Animated.Value(0);
constructor(props) {
super(props);
this.state = {
verticalPos: 0
}
}
deleteCart = () => {
this.props.dispatch(emptyCart(this.props.cart.customer.customerId));
}
viewPanResponder = PanResponder.create({
onStartShouldSetPanResponder: () => true,
onPanResponderMove: (e, gs) => {
// Only set the value if the user swipes left.
if (Math.sign(gs.dx) === -1) {
this.cartXPos.setValue(gs.dx);
}
},
onPanResponderRelease: (e, gs) => {
this.width = Dimensions.get('window').width;
const touchStart = e.touchHistory.touchBank[0].startTimeStamp;
const touchFinish = e.touchHistory.touchBank[0].currentTimeStamp;
const result = touchFinish - touchStart;
const resultBool = result < 150;
const noVertical = gs.vy < 0.05;
this.setState({verticalPos: gs.vy});
// If the user swipes completely accross the screen to the left then just delete the cart.
if ((Math.sign(gs.dx) === -1) && (Math.abs(gs.dx) > this.width * 0.8) && noVertical) {
this.deleteCart();
Animated.timing(this.cartXPos, {
toValue: this.width,
duration: 50
}).start();
}
// If the user swipes more than 25% of the screen's width to the left show a delete box option.
else if ((Math.sign(gs.dx) === -1) && (Math.abs(gs.dx) > this.width * 0.25) && noVertical) {
const position = this.width * 0.20;
Animated.timing(this.cartXPos, {
toValue: -position,
duration: 150
}).start();
}
// Small touches will act as a normal press touch and take the user to the next screen.
else if ((Math.abs(gs.dx) < this.width * 0.01) && (touchFinish - touchStart < 100) && noVertical) {
this.props.onSelect(this.props.cart.customer.customerId);
Animated.timing(this.cartXPos, {
toValue: 0,
duration: 150
}).start();
}
// Reset the cart view position.
else {
Animated.timing(this.cartXPos, {
toValue: 0,
duration: 0
}).start();
}
}
});
render() {
const {cart} = this.props;
const {customer} = cart;
return (
<View style={styles.wrapper}>
<Animated.View {...this.viewPanResponder.panHandlers} style={[styles.animatedView, {left: this.cartXPos}]}>
<View>
<Text>Vertical Position: {this.state.verticalPos}</Text>
</View>
<View style={styles.cart}>
<View>
<View style={styles.lineItem}>
<Text style={styles.lineText}>{customer.customerName + ' #' + customer.customerId.trim()}</Text>
</View>
<View style={styles.lineItem}>
<Text style={styles.lineText}>Cases: {cart.cases}</Text>
</View>
<View style={styles.lineItem}>
<Text style={styles.lineText}>Updated: {cart.lastModified}</Text>
</View>
</View>
<MBIcon name='ico-24-chevron-right' style={styles.lineText} />
</View>
</Animated.View>
<TouchableOpacity style={styles.deleteBox} onPress={() => this.deleteCart()}>
<MBIcon name="ico-24-trash" size={30} style={styles.searchIcon} />
<Text style={styles.lineText}>( {cart.cases} )</Text>
</TouchableOpacity>
</View>
);
}
}
解决方案
推荐阅读
- android - HeterogeneousRecyclerview 中的分页
- python - 使用列表 python 中的任何单词保留句子
- python - 从稀疏矩阵创建行、列、数据 pandas 数据框
- schema - 针对 Google 数据 Feed 验证工具错误采取的措施
- apache-spark - Talend Spark 作业在运行时忽略上下文值
- react-native - expo-camera:错误:权限模块为空
- javascript - 角度 12 更新中 src 中的图像未加载到 webpack-dev-server 中
- python - 取决于 FastAPI 的效率
- odoo-14 - 在odoo中通过网页更新记录值
- java - G1GC GC 使用 Swap 内存