编辑：我讨厌google搜索答案，并发现了一些问题，那些永远不会从10岁前得到解决，所以我回答我自己的那些可能想知道的问题。 就我而言，我只是禁用bounces支撑的滚动视图。 由于FlatList扩展阵营的滚动型，创下bounces到false的，我创建动画FlatList组件从停止跳动，并解决我的问题。 祝你今天愉快。
希望你有一个伟大的日子。 我试图动态动画我的头，但由于某种原因，每当我滚动超出开始或滚动视图，反弹效应混乱与动画。结束（如下图所示的GIF）
GIF
同样GIF但分辨率更高
正如你所看到的，当我滚动到顶部，使反弹的动画，标题认为我正在向下滚动的弹跳列表中返回的第一个元素重回巅峰。 我该如何解决？ 我在网络上看到的地方，将内插的动画处理的值会有所帮助，但我真的不明白。 下面是我的代码。 谢谢
const AnimatedFlatList = Animated.createAnimatedComponent(FlatList) const tempArray = [ ...(an array of my data) ] export default class TempScreen extends React.Component { static navigationOptions = { header: null } constructor(props) { super(props) this.state = { animatedHeaderValue: new Animated.Value(0), } } render() { const animatedHeaderHeight = Animated.diffClamp(this.state.animatedHeaderValue, 0, 60) .interpolate({ inputRange: [0, 70], outputRange: [70, 0], }) return ( < View > < Animated.View style = { { backgroundColor: 'white', borderBottomColor: '#DEDEDE', borderBottomWidth: 1, padding: 15, width: Dimensions.get('window').width, height: animatedHeaderHeight, } } > < /Animated.View> < AnimatedFlatList scrollEventThrottle = { 16 } onScroll = { Animated.event( [{ nativeEvent: { contentOffset: { y: this.state.animatedHeaderValue } } }] ) } data = { tempArray } renderItem = { ({ item }) => < View style = { { flex: 1 } } > < Text style = { { fontWeight: 'bold', fontSize: 30 } } > { item.name } < /Text> < Text > { item.year } < /Text> < /View> } /> < /View> ) } }
如果你想只解决了“反弹”问题，问题是，iOS的给予diffClamp负scrollY值。 你需要过滤这些并确保scrollY仍然> = 0，以避免diffClamp受着反弹时。
const clampedScrollY = scrollY.interpolate({
inputRange: [0, 1],
outputRange: [0, 1],
extrapolateLeft: 'clamp',
});
另外一个不错的技巧是使用一个“悬崖”技术，使头部只有一个最小scrollY位置后消失。
下面是从我的应用程序的代码：
const minScroll = 100;
const clampedScrollY = scrollY.interpolate({
inputRange: [minScroll, minScroll + 1],
outputRange: [0, 1],
extrapolateLeft: 'clamp',
});
const minusScrollY = Animated.multiply(clampedScrollY, -1);
const translateY = Animated.diffClamp(
minusScrollY,
-AnimatedHeaderHeight,
0,
);
const opacity = translateY.interpolate({
inputRange: [-AnimatedHeaderHeight, 0],
outputRange: [0.4, 1],
extrapolate: 'clamp',
});
clampedScrollY将是：
- 0时scrollY = 0
- 0时scrollY = 50
- 0时scrollY = 100
- 30当scrollY = 130
- 170当scrollY = 270
你的想法。 所以diffClamp将只> 0如果scrollY> 100，并且该阈值后增量1 1。
我有像两个小时前同样的问题...
您可以设置Scrollview物业bounces=false ，但如果你想有一个RefreshControl用于刷新ScrollView （在我的情况等）的含量，反弹酒店保持活跃。
我解决了这个凉爽的文章如下： https://medium.com/appandflow/react-native-collapsible-navbar-e51a049b560a 。
我不是动画库的专家，所以我后我的代码：
constructor(props) {
const scrollAnim = new Animated.Value(0);
const offsetAnim = new Animated.Value(0);
this.state = {
scrollAnim,
offsetAnim,
AnimatedViewHeight: 1,
clampedScroll: Animated.diffClamp(
Animated.add(
scrollAnim.interpolate({
inputRange: [0, 1],
outputRange: [0, 1],
extrapolateLeft: 'clamp',
}),
offsetAnim
),0, 1
)
}
}
render() {
const minScroll = this.state.AnimatedViewHeight;
const navbarTranslate = this.state.clampedScroll.interpolate({
inputRange: [0, minScroll],
outputRange: [0, -minScroll],
extrapolate: 'clamp',
});
return (
<View style={{
flex: 1
}}>
<Animated.View
onLayout={(event) => {
var { height } = event.nativeEvent.layout;
this.setState({
AnimatedViewHeight: height,
clampedScroll: Animated.diffClamp(
Animated.add(
this.state.scrollAnim.interpolate({
inputRange: [0, 1],
outputRange: [0, 1],
extrapolateLeft: 'clamp',
}),
this.state.offsetAnim
), 0, height)
})
}}
style={[{ transform: [{ translateY: navbarTranslate }] }]}>
<View><Text>THIS IS YOUR HEADER</Text></View>
</Animated.View>
<AnimatedFlatList
// iOS offset for RefreshControl
contentInset={{
top: this.state.AnimatedViewHeight,
}}
contentOffset={{
y: -this.state.AnimatedViewHeight,
}}
scrollEventThrottle={1}
onScroll={
Animated.event(
[{ nativeEvent: { contentOffset: { y: this.state.scrollAnim } } }],
{ useNativeDriver: true },
)}
data={this.state.data}
keyExtractor={(item, idx) => idx}
ListFooterComponent={this.renderFooter}
renderItem={this.renderItem}
onEndReached={this.handleLoadMore}
refreshControl={
<RefreshControl
refreshing={this.state.refreshing}
onRefresh={this.onRefresh}
// Android offset for RefreshControl
progressViewOffset={this.state.AnimatedViewHeight}
/>
}
onEndReachedThreshold={0.5} />
</View>
)
}
this.state.AnimatedViewHeight是头，检索的高度通过调用onLayout功能。 在这个函数的我也创下了新的clampedScroll因为我有一个新的高度（在我的情况下，头部没有一个固定的大小）。 之后，在render()定义一个变量（ navbarTranslate ）控制根据您的动画滚动型的滚动位置的头信息长度。
