如何使用 react-native-router-flux 在组件内实现选项卡答案

【问题标题】：How to implement Tabs inside a component with react-native-router-flux如何使用 react-native-router-flux 在组件内实现选项卡
【发布时间】：2021-05-12 19:32:30
【问题描述】：

我正在尝试在 React Native 中的一个组件中实现选项卡导航。我有一个包含一些组件的抽屉，但我希望标签导航只在其中一个组件内。这是我的路由器/场景结构

Router.js

import React from 'react';
import { Router, Scene, Drawer, Tabs } from 'react-native-router-flux';

import About from './components/About';
import Contact from './components/Contact';
import Home from './components/Home';
import SideBar from './components/SideBar';
import StoreOffers from './components/StoreOffers';


import Local from './components/Local';
import Snack from './components/Snack';
import Continental from './components/Continental';


const RouterComponent = () => {
    return(
        <Router>
            <Scene key="root">
                <Drawer
                    open={false}
                    key="Drawer"
                    contentComponent={SideBar}
                    drawerWidth={300}
                    hideNavBar
                    drawerPosition="right"
                >
                    <Scene key="rootScene">
                        <Scene 
                            key="Home" 
                            component={Home}
                            title="What Would you like to order today ?"
                            initial
                            style={{fontSize: 10}}
                        />

                        <Scene 
                            key="About" 
                            component={About}
                            title="About"
                        />

                        <Scene 
                            key="Contact" 
                            component={Contact}
                            title="Contact US"
                        />
                    </Scene>
               </Drawer>

                <Scene
                    key="StoreOffers" 
                    component={StoreOffers}
                    title="What We Have Available"
                >
                    <Scene 
                        key="Tabs"
                        tabBarPosition="bottom"
                        tabs
                        
                    >
                        <Scene
                            key="Local" 
                            component={Local}
                            title="Local"
                            initial
                        />
                        <Scene
                            key="Snack" 
                            component={Snack}
                            title="Snack"
                            initial
                        />
                    </Scene>
                </Scene>


            </Scene>
        </Router>
    )
}

export default RouterComponent;

在我的组件 Store Offer 中，如何在其中显示选项卡？

【问题讨论】：

你试过用包裹你的场景吗？
在我的组件内或路由器文件内？？
内部路由器文件
请我试过了。没用..你能给我一个示例代码吗？请
我添加了一个答案，对我来说，当我用另一个场景标签包装每个场景时，标签的工作方式就是这样，我不知道为什么。希望对你有帮助

标签： react-native react-native-router-flux

【解决方案1】：

对我来说，它是这样工作的，我用<Tabs> 包装了我想要的组件，并且标签中的每个场景都应该用另一个<Scene> 包装。

import React from 'react';
import { Router, Scene, Drawer, Tabs } from 'react-native-router-flux';

import About from './components/About';
import Contact from './components/Contact';
import Home from './components/Home';
import SideBar from './components/SideBar';
import StoreOffers from './components/StoreOffers';


import Local from './components/Local';
import Snack from './components/Snack';
import Continental from './components/Continental';


const RouterComponent = () => {
    return(
        <Router>
            <Scene key="root">
                <Drawer
                    open={false}
                    key="Drawer"
                    contentComponent={SideBar}
                    drawerWidth={300}
                    hideNavBar
                    drawerPosition="right"
                >
                    <Scene key="rootScene">
                        <Tabs tabs lazy swipeEnabled tabBarPosition="top" tabBarComponent={() => null}>
                           <Scene key="homeScene" type={ActionConst.PUSH}>
                              <Scene 
                                  key="Home" 
                                  component={Home}
                                  title="What Would you like to order today ?"
                                  initial
                                  style={{fontSize: 10}}
                              />
                           </Scene>
                           <Scene key="homeScene" type={ActionConst.PUSH}>
                              <Scene 
                                  key="otherSceneInsideTab"
                                  component={OtherComponent}
                              />
                           </Scene>
                        </Tabs>


                        <Scene 
                            key="About" 
                            component={About}
                            title="About"
                        />

                        <Scene 
                            key="Contact" 
                            component={Contact}
                            title="Contact US"
                        />
                    </Scene>
               </Drawer>

                <Scene
                    key="StoreOffers" 
                    component={StoreOffers}
                    title="What We Have Available"
                >
                    <Scene 
                        key="Tabs"
                        tabBarPosition="bottom"
                        tabs
                        
                    >
                        <Scene
                            key="Local" 
                            component={Local}
                            title="Local"
                            initial
                        />
                        <Scene
                            key="Snack" 
                            component={Snack}
                            title="Snack"
                            initial
                        />
                    </Scene>
                </Scene>


            </Scene>
        </Router>
    )
}

export default RouterComponent;

【讨论】：