Как скрыть и показать панель навигации в React Native?
Я передаю реквизиты, и когда прокручивается определенная высота, я передаю параметры showHeader: "True", поэтому при прокрутке заголовок непрозрачен и изначально прозрачен. Итак, после того, как пользователь прокрутит вверх, я хочу, чтобы заголовок снова был прозрачным, но он не прозрачен, как я могу это исправить?
Код:
Компонент Inisde ProjectDetailsScreen:
handleScroll = (event) => {
if (event.nativeEvent.contentOffset.y > 100) {
console.info("Height is this ", event.nativeEvent.contentOffset.y);
this.props.navigation.setParams({ showHeader: "True"})
}
}
<ScrollView style = {styles.container}
onScroll = {this.handleScroll}
</ScrollView>
Внутри navigation.js:
ProjectDetails: {
screen: ProjectDetailsScreen,
navigationOptions: ({ navigation }) => ({
headerTransparent: navigation.state.params.showHeader === "True" ? false : true ,
headerTitle: navigation.state.params.myTitle,
}),
}
Итак, изначально заголовок прозрачен, поэтому после прокрутки вниз заголовок непрозрачен, но снова, если я прокручиваю обратно в исходное положение, я хочу, чтобы заголовок был прозрачным, как я могу это сделать?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Установите его на ложь
handleScroll = (event) => {
if (event.nativeEvent.contentOffset.y > 100) {
console.info("Height is this ", event.nativeEvent.contentOffset.y);
this.props.navigation.setParams({ showHeader: "True"})
}
else {
this.props.navigation.setParams({ showHeader: "False"})
}
}
@Italy Gal Для плавного перехода могу ли я в этом случае использовать подавление дребезга или дросселирование?
Вы использовали переход CSS? Вы можете добавить transition: all 1s ease; в свой заголовок, и при изменении прозрачности, например, переход будет плавным.
Вместо того, чтобы преобразовывать «Истина» в истину, почему вы не устанавливаете состояние с правдой?