按钮 onpress 转到反应本机基础中的选项卡屏幕

Question

这里我使用了 React 原生基础滚动标签。如果我按下按钮（'Go to menu4'），那么这个屏幕将移动到 Menu4。该怎么做？

这是我的代码。

import React, { Component } from 'react';
import { Container, Button, Tab, Tabs, ScrollableTab,Text} from 'native-base';

import Screen from './screens/Screen';

export default class MyApp extends Component {
  render() {
    return (
      <Container>
        <Tabs locked={true} renderTabBar={()=> <ScrollableTab />}>
        <Tab heading="Menu1">
            <Screen />
          </Tab>
          <Tab heading="Menu2">
            <Screen />
          </Tab>
          <Tab heading="Menu3">
            <Screen />
          </Tab>
          <Tab heading="Menu4">
            <Screen />
          </Tab>
          </Tabs>
          <Button><Text>Go to Menu4</Text></Button>
      </Container>
    );
  }
}

Answer 1

NativeBase 选项卡有一个名为goToPage 的方法。

修改你的代码：

<Tabs 
    locked={true} 
    renderTabBar={()=> <ScrollableTab />}
    ref={c=> this.tabs = c} 
>

      ...

      <Button onPress={()=> this.changePage(4)}><Text>Go to Menu4</Text></Button>

      ...

</Tabs>

changePage 函数是：

changePage=(page)=> this.tabs.goToPage(page)