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

Question

这里我使用了React native base scrollabletab。如果我按下按钮（'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)

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

Button onpress go to tab screen in react native base

react-native

react-navigation

native-base