Я использую реагировать нативно (0,61), чтобы создать приложение с прокруткой на главном экране. Я должен реализовать панель заголовка с автоматическим скрытием и нужно добавить refre sh и бесконечную прокрутку (как на временной шкале Facebook). поэтому я реализовал автоматическое скрытие заголовка с помощью встроенной анимации React. теперь я не могу определить refre sh и прокрутить до нижних жестов.
Теперь мне нужно реализовать refre sh, заголовок с автоматическим скрытием и бесконечную прокрутку на одном экране. (я добавил то, что попробовал)
const HEADER_HEIGHT = 120;
class HomeScreen extends Component {
constructor(props) {
super(props);
this.scrollY = new Animated.Value(0);
this.diffClamp = Animated.diffClamp(this.scrollY,0,HEADER_HEIGHT);
this.headerY = this.diffClamp.interpolate({
inputRange: [0, HEADER_HEIGHT],
outputRange: [0, -HEADER_HEIGHT],
});
}
onScroll(nativeEvent){
if (this.isCloseToBottom(nativeEvent)) {
this.loadMoreData();
}
}
isCloseToBottom({layoutMeasurement, contentOffset, contentSize}) {
const paddingToBottom = 100;
return layoutMeasurement.height + contentOffset.y >= contentSize.height - paddingToBottom;
}
render(): * {
return (
<View>
<Animated.View style={{
position: 'absolute',
width: '100%',
top: 0,
left: 0,
backgroundColor: '#8c8c8c',
height: HEADER_HEIGHT,
transform:[
{
translateY:this.headerY
}
]
}}>
<Text>Hiii ALL</Text>
</Animated.View>
<Animated.ScrollView
scrollEventThrottle={16}
//I have to use this due to Header disappear when user scroll down to refresh
bounces={false}
//i used this previously to mange refresh. its not working because bounces={false}
refreshControl={<RefreshControl refreshing={this.props.refreshing} onRefresh={() => this.onRefresh()}/>}
//in previous for infinte scroll
onScroll={({nativeEvent}) => this.onScroll(nativeEvent)}
//now need to add this way to manage Auto Hide navbar
onScroll={Animated.event(
[{
nativeEvent: {
contentOffset: {
y: this.scrollY,
},
},
}],
)}
//I tried this but it does not working at all
onScroll={(e)=>{
Animated.event(
[{
nativeEvent: {
contentOffset: {
y: this.scrollY,
},
},
}],
);
this.onScroll(e)
}}
>
//content
</Animated.ScrollView>
</View>
);
}
}