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

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

1 个答案: