Разве мы не можем позиционировать заголовок, используя абсолютное позиционирование в реагирующей навигации? - PullRequest
Новая
       60

Разве мы не можем позиционировать заголовок, используя абсолютное позиционирование в реагирующей навигации?

0 голосов
/ 11 января 2020

Я пытаюсь скрыть заголовок при прокрутке вверху ScrollView и снова показать его при прокрутке вниз. При поиске inte rnet я наткнулся на некоторые решения, использующие абсолютное позиционирование с анимацией. Например, как люди предложили в этой ссылке https://github.com/react-navigation/react-navigation/issues/480.

Ссылка, которой я поделился, использует абсолютную позицию и обновляет top, используя интерполяцию. Я пытаюсь сделать то же самое и не могу обновить его, вместо этого я получаю предупреждение: position absolute is not supported on headerStyle

Как изменить заголовок так, чтобы он скрывался при прокрутке ScrollView на экране с использованием реакции-навигации .

Общие параметры навигации 

const AppNavigator = createStackNavigator(
  {
    Home: MainListing,
    Details: DetailsScreen
  },
  {
    initialRouteName: 'Home',
    defaultNavigationOptions: {
      headerStyle: { backgroundColor: customTheme.COLORS.PRIMARY },
      headerTitle: (obj) => {
        return (
          <Image source={Logo} style={{ resizeMode: 'contain', width: 100, height: 100 }} />
        )
      },
      cardStyle: { backgroundColor: '#FFFFFF' },
    },
  }
)

Состояние c Параметры навигации на экране 

class MainListing extends React.Component {

  render() {
    return (
      <ScreenContainer>
        <ScrollView>
          //some other components so that the view scrolls
        </ScrollView>
      </ScreenContainer>
    );
  }
}

const ThemedElement = withGalio(MainListing);
ThemedElement.navigationOptions = ({ navigation, navigationOptions }) => {
  const { params } = navigation.state;
  return {
    headerStyle: {   
      position:'absolute',   
      ...navigationOptions.headerStyle
    }
  };
};
export default ThemedElement;
...