Question

我的App中有一个相当大的嵌套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>
);
}
}

动态启用/禁用反应导航TabNavigator

1 个答案: