在滚动上反应导航切换选项卡栏

时间:2018-09-18 13:56:11

标签: reactjs animation scroll tabs react-navigation

我正在使用React Native + React Navigation的项目,该项目具有选项卡和堆栈导航器的组合。当用户向下滚动FlatList / ScrollView以增加可见内容时,我试图隐藏选项卡。最终实现将使用Animated库对其进行动画处理,但目前我只是试图通过单击手动启动隐藏。问题是,当我尝试通过调用tabBarVisible来设置this.props.navigation.setParams({ tabBarVisible: false })}时不起作用。

导航设置如下:

TabNavigator
  - HomeStackNavigator
    - HomePage
    - Contact
    - FAQ
 ...
 (total of 5 tabs with stacknavigators)
 ...

在主页中,我有以下内容:

class HomeScreen extends React.Component {
    render() {
        return (
            <SafeAreaView style={styles.container}>
                <TouchableOpacity onPress={() => this.props.navigation.setParams({ tabBarVisible: false })}>
                    <Text>Hide bar</Text>
                </TouchableOpacity>
            </SafeAreaView>
        );
    }
}

这基本上是来自HomeScreen -> HomeStack -> TabBar的电话。知道为什么嵌套堆栈导航器内的屏幕的顶部选项卡导航器无法达到选项卡栏的可见性吗?

0 个答案:

没有答案