Я работаю над приложением, в котором я пытаюсь Анимировать View
на основе прокрутки. Позиция нескольких ScrollView
s.
Вот как выглядит экран.
Вышеуказанный экран имеет 2 части
- Компонент
View
сверху - Компонент
TabNavigator
в нижней части
каждая вкладка в TabNavigator
имеет в ней ScrollView
(в этом случае 2, но может быть больше). Я хочу достичь, чтобы свернуть View
, когда пользователь прокручивает вниз и расширяет его, когда пользователь прокручивается вверх.
На одной вкладке у меня все было хорошо, она работала именно так, как я этого хотел, но проблема возникла, когда я добавил вторую вкладку.
Проблема
Когда я немного прокручиваю вкладку 1 и перехожу на tab2 и прокручиваю ее, она становится отрывистой. см. GIF, чтобы понять, что я пытаюсь сказать
Update
Проверьте эту перекуску на expo.io, чтобы увидеть проблему в режиме реального времени
Что я пробовал
App.js
export default class App extends Component {
constructor (props) {
super(props)
this.state = {
/* omitted - not related */
scrollY: new Animated.Value(0)
}
}
render () {
let translateY = this.state.scrollY.interpolate({
inputRange: [0, 600],
outputRange: [0, -290],
extrapolate: 'clamp'
});
let TabsTranslateY = this.state.scrollY.interpolate({
inputRange: [0, 600],
outputRange: [0, -290],
extrapolate: 'clamp'
});
return (
<View style={styles.container}>
<Animated.View style={{transform: [{translateY: translateY}], overflow: 'hidden'}}>
<Text style={styles.welcome}>
Welcome to React Native!!
</Text>
<Text style={styles.time}>
{this.state.hour} : {this.state.minute}
</Text>
<TouchableOpacity onPress={() => { /* omitted */ }} style={styles.button}><Text style={styles.buttonText}>Set Time</Text></TouchableOpacity>
</Animated.View>
<Animated.View style={{
flex: 0,
transform: [{translateY: TabsTranslateY}],
height: Dimensions.get('window').height
}}>
<Tabs removeClippedSubviews={false} screenProps={{animatedScrollY: this.state.scrollY}}/>
</Animated.View>
</View>
)
}
}
const styles = StyleSheet.create({/* omitted styles*/})
Home.js(Tab1)
/* omitted imports */
export default class Home extends Component {
/* omitted navigation options */
constructor (props) {
super(props)
this.state = {
scrollY: this.props.screenProps.animatedScrollY
}
}
render () {
return (
<View>
<Animated.ScrollView onScroll={Animated.event(
[{nativeEvent: {contentOffset: {y: this.state.scrollY}}}],
{useNativeDriver: true}
)} scrollEventThrottle={16}>
{Array(90).fill().map((v, i) => {
return <Text key={i}
style={{flex: 1, backgroundColor: '#333', padding: 20, marginVertical: 10, color: 'white'}}>Item
#{i + 1}</Text>
})}
</Animated.ScrollView>
</View>
)
}
}
Photos.js(Tab2)
/* omitted imports */
export default class Photos extends Component {
/* omitted navigation options */
constructor (props) {
super(props)
this.state = {
PhotosScrollY: this.props.screenProps.animatedScrollY
}
}
render () {
return (
<Animated.ScrollView onScroll={Animated.event(
[{nativeEvent: {contentOffset: {y: this.state.PhotosScrollY}}}],
{useNativeDriver: true}
)} scrollEventThrottle={16}>
<View style={{flex: 1,}}>
{Array(90).fill().map((v, i) => {
return <View key={i} style={/* omitted */}>
<Text style={/* omitted */}>
Photo #{i + 1}
</Text>
</View>
})}
</View>
</Animated.ScrollView>
)
}
}
Я не уверен, как преодолеть эту проблему. Любые предложения и решения приветствуются.
Спасибо.