反应导航隐藏底部

Question

在listScreen模块中，渲染组件后， 我想向上滑动以隐藏底部的标签栏，向下滑动以显示底部的标签栏。 我该如何实现？我发现使用现有的API不可能做到这一点

此功能可以实现 如果listScreen直接用作createBottomTabNavigator的参数。但是， 将listStack用作createBottomTabNavigator的参数将不起作用，代码如下。

const listStack = createStackNavigator({
    list: {
        screen: listScreen,
        navigationOptions: {
            title: 'list'
        }
    },
    Detail: {
        screen: Detail
    }
});

const bottomTabNavigator = createBottomTabNavigator(listStack);
export default class listScreen extends Component {
    constructor(props) {
        super(props);
        this.state = {
            dataSource: [],
            currentOffsetY: 0
        };
    }

    static navigationOptions = ({
        navigation,
        navigationOptions
    }) => {
        let obj = {
            title: 'demo'
        }
        if (navigation.state) {
            obj.tabBarVisible = !!navigation.getParam('tabBarVisible', true);
        }
        return obj;
    };

    componentDidMount = () => {
        axios({
            url: 'apiurl',
            method: "get",
            params: {
                size: 20,
                pageindex: 1
            }
        }).then(response => {
            this.setState({
                dataSource: response.data.list
            });
        }).catch(function (error) {
            console.log(error);
        });
    };

    shouldComponentUpdate(nextProps, nextState) {
        return !!(this.state.dataSource == nextState.dataSource)
    }

    _onScroll(event) {
        if (Math.abs(event.nativeEvent.contentOffset.y - this.state.currentOffsetY) < 10) {
            return;
        }
        if (this.state.currentOffsetY - event.nativeEvent.contentOffset.y < 0)
            this.props.navigation.setParams({
                tabBarVisible: false
            })
        else
            this.props.navigation.setParams({
                tabBarVisible: true
            })
        this.setState({
            currentOffsetY: event.nativeEvent.contentOffset.y
        })
    }

    render() {
        return (
            <FlatList showsVerticalScrollIndicator = {false}
            data = {this.state.dataSource}
            renderItem = {this.renderItem}
            keyExtractor = {item => item.id}
            onScroll = {this._onScroll.bind(this)}
            />

        );
    }
}