react-native - 使用 Animated.Flatlist 和 Animated.ScrollView 为 Animated.View 设置动画不流畅

Question

我想做一个动画标题。

我创建了一个 FlatList 的动画组件，

用过 onScroll函数来更新动画值。

使用绝对位置放置一个 View (Animated.View) 作为动画 FlatList 上方的标题。

最后，使用变换属性插入动画值以更改 View (Animated.View)。

动画效果很好，但动画一点也不流畅。

我 saw this issue如何使用 scrollEventThrottle有助于平滑度。所以我认为使用 FlatList 会很顺利，但事实并非如此。如果您在按下时滚动，则很流畅。但是如果你滚动并离开手指，它会很紧张(我不知道如何描述它。抱歉)。滚动很流畅，但动画 View (标题)动画一点也不流畅。

环境

react :16.0.0-alpha.12，

react 原生:^0.47.0，

节点:v7.7.3

npm: 4.1.2

yarn :0.21.3

目标平台: iOS和安卓

构建工具:世博会

Link to snack demo

export default class AnimatedHeader extends React.Component {
	state = {
		animatedValue: new Animated.Value(0),
	};
	
	_renderItem = ({item}) => {
		return (
			<View style={styles.nonsenseItem}>
				<Text style={styles.itemText}>{item}</Text>
			</View>
		)
	};
	
	render() {
		let scaleY = this.state.animatedValue.interpolate({
			inputRange: [0, 180],
			outputRange: [1, 0.5],
			extrapolate: 'clamp',
		});
		
		let translateY = this.state.animatedValue.interpolate({
			inputRange: [0, 180],
			outputRange: [0, -100],
			extrapolate: 'clamp',
		});
		
		return (
			<View style={styles.container}>
				<AnimatedFlatList
					contentContainerStyle={{marginTop: 200}}
					scrollEventThrottle={16} // <-- Use 1 here to make sure no events are ever missed
					onScroll={Animated.event(
						[{nativeEvent: {contentOffset: {y: this.state.animatedValue}}}],
						{useNativeDriver: true} // <-- Add this
					)}
					data={data}
					renderItem={this._renderItem}
					keyExtractor={(item, i) => i}/>
				<Animated.View style={[styles.headerWrapper, {transform: [{scaleY}, {translateY}]}]}/>
			</View>
		)
	}
}

更新

因此，我尝试使用 ScrollView 实现相同的功能。但是，我认为，与 FlatList 相比，使用 ScrollView 的情况更糟。

Here is the expo snack demo: Animated ScrollView Header

我想我需要先提一下我是如何来到这里的。所以，我试图通过一个非常好的 tutorial in Medium 来实现这一点。 ，以及通过观看此 awesome youtube react conf viedo by Brent .但是，在 youtube 视频上使用的确切代码具有相同的效果。另外，在 Medium 教程中，作者给出了他的 expo Animated header link 的链接。 ，这工作非常顺利。但是当我复制粘贴代码时，相同的代码不能顺利工作。所以，我认为问题在于 react 或 react native 版本。如果我有任何新的更新，我会更新。谢谢你。

Answer 1

React Native 0.46 中有一个回归，幸运的是，它已在 0.48.2 中得到修复。 (参见 this issue 和 this PR )。这就是您在最近的 Expo 版本中遇到问题的原因。我在自定义视差图像时遇到了这个问题，通过使用 RN 0.48.3 构建自定义二进制文件解决了这个问题。

您的代码很好，即使我建议设置 scrollEventThrottle至 1因为这确实有助于在 iOS 上解决问题。