Как установить поле tabBar, соответствующее значению Animated Value.

Question

Я использую реагирующую навигацию Tab Navigation.У меня есть заголовок над моей вкладкой навигации, и он может свернуться и развернуться в соответствии с scrollView.

Это моя проблема: когда я прокручиваю все вверх, заголовок сворачивается, и это то, что я хочу, но вкладка остается статичной (см. Фото).Есть ли способ, которым я мог бы установить tabBar margin, соответствующий просмотру прокрутки?Чтобы не было marginTop, когда заголовок свернут.

const Header_Maximum_Height = 40;
const Header_Minimum_Height = 0;

export default class App extends Component {

  render(){
    return (
      <View style={{flex:1, marginTop:30}}>
        <AppContainer/>
      </View>
    )
  }
}

class HomeScreen extends Component{
      constructor()
    {
         super();
         this.AnimatedHeaderValue = new Animated.Value(0);
     }
render() {

const AnimateHeaderBackgroundColor = this.AnimatedHeaderValue.interpolate(
   {
    inputRange: [ 0, ( Header_Maximum_Height - Header_Minimum_Height )  ],
    outputRange: [ '#009688', '#00BCD4' ],
    extrapolate: 'clamp'
   });

const AnimateHeaderHeight = this.AnimatedHeaderValue.interpolate(
      {
       inputRange: [ 0, ( Header_Maximum_Height - Header_Minimum_Height ) ],
       outputRange: [ Header_Maximum_Height, Header_Minimum_Height ],
       extrapolate: 'clamp'
                  });
          return (
                  <SafeAreaView style={{flex:1}}>

                  <Animated.View style={{height:AnimateHeaderHeight,width:'100%', backgroundColor:'gray'}}>
                    <Text style={{color:'white'}}> Collapsible Expandable Header </Text>
                  </Animated.View>

                    <Animated.ScrollView
                                      scrollEventThrottle = { 16 }
                                      onScroll = { Animated.event(
                                        [{ nativeEvent: { contentOffset: { y: this.AnimatedHeaderValue }}}]
                                  )}>

                        <ImageBackground
                        style={{width:375, height:400}}
                        source={require('./assets/pizza.jpg')}>
                        </ImageBackground>

                 </Animated.ScrollView>
                 </SafeAreaView>
                          );
                        }
                      }
    const tabBarHeight = 100

    const AppTabNavigator = createMaterialTopTabNavigator({

      Home:{
      screen:HomeScreen,
      navigationOptions: {
          header: null,
          tabBarVisible:true,
          activeTintColor: '#e91e63',
        }
      }, {
        tabBarOptions: {
         showLabel: true,
          style: {
              backgroundColor: 'rgba(22, 22, 22, 0)',
              position: 'absolute',
              Top:  Dimensions.get('window').height-tabBarHeight,
              left:0,
              right:0,
//I initially set the margin to 45 but as I scroll up How can I set the marginTop to 0 when I reach the top screen.
              marginTop:45
          },
          labelStyle:{
            fontSize:15,
            color:"white"
          }
        }
       }
      )

Я также пытался marginTop до this.AnimatedHeaderValue, но нене похоже на работу.Любые советы или комментарии будут очень полезны.

Answer 1

Вы можете добавить listener на Animated.event , который позволит вам получить значение вашего y:

<Animated.ScrollView
  scrollEventThrottle={16}
  onScroll={Animated.event(
    [{ nativeEvent: { contentOffset: { y: this.AnimatedHeaderValue }}}],
    {
      useNativeDriver: true,
      listener: event => {
        const offsetY = event.nativeEvent.contentOffset.y
        this.onScrollChange(offsetY)
      }
    },
  )}
>
  <ImageBackground
    style={{ width: 375, height: 400 }}
    source={require('./assets/pizza.jpg')}
  />
</Animated.ScrollView>

Здесь вам просто нужноопределите onScrollChange в вашем компоненте.Поскольку ваш marginTop находится на верхнем уровне <App />, изменить его будет немного сложно, поэтому вы можете использовать Redux или Context для обновления и использования этого значения.

Вы также можете поставить поле на том же уровне и использовать состояние, но это заставит вас делать то же самое для каждой страницы в зависимости от вашей архитектуры.

---

Поскольку вам нужно изменить во время выполненияtabBarOptions, вам потребуется создать и предоставить пользовательский tabBarComponent для вашего навигатора:

const AppTabNavigator = createMaterialTopTabNavigator(
  {
    Home: {
      screen: HomeScreen,
      navigationOptions: {
        header: null,
        tabBarVisible: true,
        activeTintColor: '#e91e63',
      },
    },
  },
  {
    tabBarComponent: CustomTabBar
  },
)

Этот компонент расширит компонент по умолчанию, используемый реагирующей навигацией, и подключится кstate.

import React from 'react'
import { MaterialTopTabBar } from 'react-navigation'

export default ({ hasMargin, ...props }) => (
  <MaterialTopTabBar
    {...props}
    showLabel
    labelStyle={{
      fontSize: 15,
      color: 'white',
    }}
    style={{
      backgroundColor: 'rgba(22, 22, 22, 0)',
      position: 'absolute',
      top: Dimensions.get('window').height-tabBarHeight,
      left: 0,
      right: 0,
      marginTop: hashMargin ? 45 : 0,
    }}
  />
)

Проблема в том, что у вас не будет переменной hasMargin.Вам нужно будет либо выбрать connect ваш компонент , используя Redux , либо использовать контекст React .И то, и другое требует некоторого понимания и настройки, поэтому вам, возможно, придется немного ознакомиться с ними.Как только это будет сделано, определите onScrollChange, чтобы изменить свой контекст или отправить действие с избыточностью.