如何在 React Native 中隐藏和显示导航栏? [英] How to hide and show navbar in React Native?

问题描述

我正在传递道具，当滚动特定高度时，我正在传递参数 showHeader: "True" 所以当我滚动标题时，标题是非透明的，最初它是透明的.因此，在用户滚动回顶部后，我希望标题再次透明但不透明，我该如何解决?

I am passing props and when a particular height is scrolled I am passing params showHeader: "True" so when I scroll the header is non transparent and initially it is transparent. So after user scrolls back to top I want header to be transparent again but it is non transparent how can I fix this ?

代码:

Inisde ProjectDetailsS​​creen 组件:

Inisde ProjectDetailsScreen component :

handleScroll = (event) => {
        if(event.nativeEvent.contentOffset.y > 100) {
            console.log("Height is this ", event.nativeEvent.contentOffset.y);
            this.props.navigation.setParams({ showHeader: "True"})
        }
    }

<ScrollView style={styles.container} 
                onScroll={this.handleScroll}
</ScrollView>

navigation.js 内部:

Inside navigation.js:

ProjectDetails: {
        screen: ProjectDetailsScreen,
        navigationOptions: ({ navigation }) => ({

            headerTransparent: navigation.state.params.showHeader === "True" ? false : true ,

            headerTitle: navigation.state.params.myTitle,
        }),
      }

所以最初标题是透明的，所以向下滚动标题后是不透明的，但如果我再次滚动回初始位置，我希望标题透明，我该怎么做?

So initially header is transparent so after scrolling down header is non transparent but again if I scroll back to initial position I want header to be transparent how can I do this ?

推荐答案

设为 false

handleScroll = (event) => {
    if(event.nativeEvent.contentOffset.y > 100) {
        console.log("Height is this ", event.nativeEvent.contentOffset.y);
        this.props.navigation.setParams({ showHeader: "True"})
    }
    else {
        this.props.navigation.setParams({ showHeader: "False"})
    }
}

这篇关于如何在 React Native 中隐藏和显示导航栏?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！