如何在 React Native 中隐藏和显示导航栏



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

法典:

Inisde ProjectDetailsScreen 组件 :

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>

内部导航.js:

ProjectDetails: {
        screen: ProjectDetailsScreen,
        navigationOptions: ({ navigation }) => ({
            headerTransparent: navigation.state.params.showHeader === "True" ? false : true ,
            headerTitle: navigation.state.params.myTitle,
        }),
      }
所以最初标题是透明的,所以向下滚动标题是不透明的,

但同样,如果我滚动回初始位置,我希望标题是透明的,我该怎么做?

将其设置为 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"})
    }
}

相关内容

  • 没有找到相关文章

最新更新