如何将底部栏选项卡视为 React Native 中的按钮？答案

【问题标题】：How to treat a bottom bar tab as a button in React Native?如何将底部栏选项卡视为 React Native 中的按钮？
【发布时间】：2019-06-25 18:29:38
【问题描述】：

所以我有一个底部导航栏，其中包含三个选项卡：HomeView、UploadVideo 和 Messages。基本上，我想做的是当用户单击 UploadVideo 选项卡时，它的行为类似于 Instagram 的行为方式。它将打开图像库，并允许选择媒体项目并将它们移动到可以输入详细信息的屏幕。如果用户完全完成或取消上传过程，它将带他们回到他们在单击“上传”选项卡/按钮之前最初所在的页面。

目前，我所拥有的是，当用户单击上传视频时，它将打开一个屏幕，其中隐藏了标签栏并带有一个图标以打开图像库和一个用于输入视频数据的表单。如果用户单击取消，无论他们在单击 UploadVideo 选项卡时所处的位置，都会将他们带回 HomeView（以这种方式编程）。所以基本上我想总结一下我的问题，我怎样才能让一个标签更像一个按钮？

【问题讨论】：

创建一个自定义标签栏，这样您就可以按照自己的方式对其进行模式化，dev.to/hrastnik/…

标签： javascript react-native react-native-navigation mobile-development

【解决方案1】：

您可以在呈现选项卡时立即打开选择器，并在选择视频后导航离开，如下所示：

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);

【讨论】：