Реализация панели вкладок response-native-router-flux - PullRequest
Новая
       17

Реализация панели вкладок response-native-router-flux

0 голосов
/ 05 июля 2019

У меня есть вопрос о панели вкладок Flux, я пытаюсь отобразить мой компонент лобби после того, как пользователь вошел в систему (поэтому на страницах входа / регистрации вкладки не требуются) после перехода к компоненту лобби я хочу отобразить свои вкладки ...

Я пробовал это: 

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;

1 Ответ

0 голосов
/ 05 июля 2019

вы можете попробовать использовать <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>
...