代码之家  ›  专栏  ›  技术社区  ›  pashute

从按钮组响应本机选项卡导航

  •  0
  • pashute  · 技术社区  · 7 年前

    在react native中,我有一个按钮组,我想要使用选项卡导航控制一些选项卡。

    标签页都有 tabBarVisible: false 我想通过调用 navigate('screen1') 等等,但在我的 updateTab 从按钮组调用 onpress 我无法访问 navigation.navigate 功能。

    我能做什么?

    import { TabNavigator } from 'react-navigation';
    
    const Tabpage = TabNavigator(
    {
       tab1: {
         screen: screen1,
         navigationOptions: {
         tabBarVisible: false,
         tabBarLabel: 'Screen 1'
      }, ...
    }
    
    export default class Tab extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          tabIndex: 2
        };
        this.updateTabIndex = this.updateTabIndex.bind(this);
      }
    
       updateTabIndex = tabIndex => {
         console.log(tabIndex);
         this.setState({ tabIndex });
         switch (tabIndex) {
            case 0:
               console.log('nearby chosen');
               // navigate('screen1'); // error:  no function named navigate
               // navigation.navigate('screen1'); // error: not a function
               // this.navigate or this.navigation.navigate all fail too  
               break;
           case 1: // etc.
           default: // etc. 
         }
      }   
    
      render() {
        <View style={styles.tabsview}>
          <ButtonGroup
            containerBorderRadius={40}
            selectedBackgroundColor='#FF0000'
            onPress={ this.updateTabIndex }
            selectedIndex={this.state.tabIndex}
            buttons={['screen0', 'screen1', 'screen2']}
            containerStyle={{ height: 30 }}
          />
        </View>
    

    如何从已更改的状态选项卡索引访问导航?

    1 回复  |  直到 7 年前
        1
  •  0
  •   Nemi Shah    7 年前

    使用 this.props.navigation.navigate('screen1');

    推荐文章