react-native-router-flux 标签栏实现答案

【问题标题】：react-native-router-flux tabbar implementationreact-native-router-flux 标签栏实现
【发布时间】：2019-07-04 22:23:46
【问题描述】：

我对通量标签栏有疑问，我试图在用户登录后显示我的大厅组件（因此在登录/注册页面不需要标签）跳转到大厅组件后，我想显示我的标签...

我试过了：

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;

【问题讨论】：

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

【解决方案1】：

您可以尝试使用<Tabs /> 和<Stack />。我使用JUMP 在标签之间导航。您只需在<Tabs /> 下添加tabs，而不是<Scene />。

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

【讨论】：