react-native-router-flux標簽欄實現

Question

我對通量的標簽欄有疑問，我試圖在用戶登錄后顯示我的大廳組件（因此在登錄/注冊頁面上不需要選項卡），我想跳轉到大廳組件后再顯示。 。

我已經試過了：

import React from 'react';
import { Scene, Router } from 'react-native-router-flux';
import LoginPage from './LoginPage';
import Lobby from './Lobby';
import RegisterPage from './RegisterPage';
import ForgotPassword from './ForgotPassword';
import Icon from 'react-native-vector-icons/MaterialIcons';
import MainTable from './MainTable';

const TabIcon = ({focused, iconName}) => {
    let color = focused ? '' : '#7f8c8d';
    return (
        <Icon name={iconName} color={color} size={30} style={{ height: 30, width: 30 }}/>
    );
};
const RouterComponent = () => {
    return (
        <Router>
            <Scene key="root">
                <Scene key="loginpage" component={LoginPage} hideNavBar={true} initial/>
                <Scene key="registerpage" component={RegisterPage} hideNavBar={true} />
                <Scene key="forgotpassword" component={ForgotPassword} hideNavBar={true} />
                <Scene key="tabber" tabs showLabel={false}>
                    <Scene key="tab1" title="NEWS" icon={TabIcon} iconName="account_circle">
                    <Scene key="lobby" tabs component={Lobby} hideNavBar={true}/>
                        </Scene>
                    <Scene key="tab2" title="MAIN_TABLE" icon={TabIcon} iconName="account_circle"  >
                    <Scene key="maintableTab" tabs component={MainTable} hideNavBar={true}/>
                    </Scene>

                </Scene>

            </Scene>
        </Router>
    );
};

export default RouterComponent;

Answer 1

您可以嘗試使用<Tabs />和<Stack /> 。 我已經使用JUMP在標簽之間導航。 您只需要在<Tabs />下添加tabs ，而無需在<Scene />下添加tabs 。

  <Tabs key="tabber" tabs showLabel={false} type={ActionConst.JUMP}>
    <Stack key="tab1" title="NEWS" icon={TabIcon} iconName="account_circle">
      <Scene key="lobby" component={Lobby} hideNavBar={true}/>
    </Stack>
    <Stack key="tab2" title="MAIN_TABLE" icon={TabIcon} iconName="account_circle">
      <Scene key="maintableTab" component={MainTable} hideNavBar={true}/>
    </Stack>
  </Tabs>