如何在React Native中将底部栏标签视为按钮？

Question

So I have a bottom navigation bar with three tabs: HomeView, UploadVideo and Messages. Basically, what I would like to do is when the user clicks on the UploadVideo tab, it will behave kind of the way Instagram does it. Where it will open up the image library, and allow the to select a media item and moves them to a screen where they can enter in their details. And if the user goes through the upload process entirely or cancels it will take them back to the page they were originally on before clicking the Upload tab/button.

Currently, what I have is when the User clicks Upload Video it will open up a screen with the tab bar hidden with an icon to open the Image library and a form to enter in the video data. If the user clicks cancel it will take them back to the HomeView (programmed this way) regardless of where they were when they click on the UploadVideo tab. So basically I guess to summarize my question, how can I get a tab to act more as a button?

Answer 1

You could immediately open a picker when the tab is rendered and navigate away once a video has been selected, something like this:

class HomeTab extends React.Component {
    render() {
        return (
            <View/>
        );
    }
}

class GalleryTab extends React.Component {
    async componentDidMount() {
        const {cancelled} = await ImagePicker.launchImageLibraryAsync(options);

        if(cancelled){
            navigation.goBack()
        }

        navigation.navigate('detailScreen')
    }

    render() {
        return (
            <View/>
        );
    }
}

const TabNavigator = createBottomTabNavigator({
    Home: HomeTab,
    Gallery: GalleryTab,
});

export default createAppContainer(TabNavigator);