Динамически включать / отключать вкладки в реагирующей навигации TabNavigator

Question

У меня в приложении довольно большая смесь вложенных Stack- и TabNavigators.

Что я хочу сделать, так это изменить количество вкладок с помощью некоторого представления, представляющего собой несколько навигаторов внутри приложения.

В настоящее время я передаю информацию о том, должна ли при запуске отображаться определенная вкладка, например:

const RootNav = RootNavigator(this.state.tabShouldBeEnabled);

return (
  <View style={styles.mainContainer}>
    <RootNav />
  </View>

Мой RootNavigator передает эту информацию до тех пор, пока не будет достигнут TabNavigator, и будет отображаться вкладка или нет.

const RootNavigator = (userLoggedIn: boolean, coachEnabled: boolean) =>
  StackNavigator(
    {
    ...
    });

Чтобы изменить состояние моего основного компонента, я рассматривал возможность передачи обратного вызова изменения состояния аналогичным образом.Но теперь мне интересно, есть ли более чистый способ, чем преобразование всех компонентов на пути в функции, которые служат только для возврата компонента с переданной функцией изменения состояния.

Answer 1

Это можно сделать условным рендерингом.

class ControlledTabs extends React.Component {
constructor(props, context) {
super(props, context);

this.handleSelect = this.handleSelect.bind(this);
this.nextTab = this.nextTab .bind(this);

this.state = {
  key: 1
};
}

nextTab (key){
 this.setState({key:key})
}

handleSelect(key) {
 alert(`selected ${key}`);
 this.setState({ key });
}

render() {
let tab1 = <Tab eventKey={1} title="Tab 1">Tab 1 content</Tab>;
let tab2 = <Tab eventKey={2} title="Tab 2" disabled>Tab 2 content</Tab>;      
let tab3 = <Tab eventKey={3} title="Tab 3" disabled>Tab 3 content</Tab>;

if(this.state.key == 2){
  tab2 = <Tab eventKey={2} title="Tab 2">Tab 2 content</Tab>;
  tab3 = <Tab eventKey={3} title="Tab 3" disabled>Tab 3 content</Tab>;
}
 if(this.state.key == 3){
  tab2 = <Tab eventKey={2} title="Tab 2">Tab 2 content</Tab>;      
  tab3 = <Tab eventKey={3} title="Tab 3">Tab 3 content</Tab>;
}

return (
  <Tabs
    activeKey={this.state.key}
    onSelect={this.handleSelect}
    id="controlled-tab-example"
  >
    {tab1}
    {tab2}
    {tab3}
    <button onClick={()=>this.nextTab(2)} value="next">Next 2</button>
    <button onClick={()=>this.nextTab(3)} value="next">Next 3</button>

  </Tabs>
);
}
}