react-native nativeBase选项卡的initialPage更改为3，但仍从选项卡0开始

Question

here is the code: (PAY ATTENTION AT COMMENT IN CODE)

import React, { Component } from 'react';
import {Container, Tab, Tabs, TabHeading, Icon, Text } from 'native-base';
import style from './../styles/compoCss' ;
import NewDB from './../database/NewDB';
import Category from "../lists/Category";
import HomePage from  './../tabs/HomePage'

export default class TabHome extends Component {
render() {
    return (
        <Container>
            <Tabs initialPage={3} > //THIS CODE DOESN'T WORK :(
                <Tab heading={
                    <TabHeading style={style.footerTabHome}>
                        <Icon name="md-aperture" style={style.iconFooter} />
                        <Text style={style.textFooter}>New</Text>
                    </TabHeading>}>
                    <NewDB/>
                </Tab>
                <Tab heading={
                    <TabHeading style={style.footerTabHome}>
                        <Icon name="md-bookmark" style={style.iconFooter} />
                        <Text style={style.textFooter}>Bookmark</Text>
                    </TabHeading>}>

                </Tab>
                <Tab heading={
                    <TabHeading style={style.footerTabHome}>
                        <Icon active name="md-apps" style={style.iconFooter}  />
                        <Text style={style.textFooter}>Catalog</Text>
                    </TabHeading>}>
                    <Category/>
                </Tab>
                <Tab heading={
                    <TabHeading style={style.footerTabHome}>
                        <Icon name="md-home" style={style.iconFooter} />
                        <Text style={style.textFooter}>Home</Text>
                    </TabHeading>} >
                    <HomePage/>
                </Tab>
            </Tabs>
        </Container>
    );
  }
}

and when I build the app or refresh it , default tab is the 3 (Home) and I think it's correct but don't show the Home page contents and when i scroll I find out that it is stack in tab 0 (new)... I search all of the forums and I can't solve my problem. please help thanks! (this problem is in android device)

Answer 1

this problem tricked by this code (but not I want to solve initialPage)

... 
class TabHome extends Component {
  componentDidMount(){
  setTimeout(this._tabs.goToPage.bind(this._tabs,1))
}
render(){
  return ...
   <Tabs ref={component => this._tabs = component}>
     ...
   </Tabs>
   ....
  }
}

if it's because of bugs in native base we must wait for update . but except that please help :)

Answer 2

I am also facing this issue and resolved it by below sample code.

constructor(props) {
    super(props);
    this.state = {     
      initialPage: 1,
      activeTab: 0
    };  }

componentDidMount() {
  setTimeout(() => {
      this.setState({ activeTab: 1 });
    }, 0);
}

render(){
  return ...
    <Tabs
        locked
        initialPage={this.state.initialPage}
        page={this.state.activeTab}
      >
}

Answer 3

I found a trick: native-base: 2.8.2 In componentDidMount():

componentDidMount() {
    const { initialPage } = this.props; //or use state
    setTimeout(this.tabs.goToPage.bind(this.tabs, initialPage));
}

In render() Tabs :

<Tabs
    ref={(c) => { this.tabs = c; return; }}
...

source: https://github.com/GeekyAnts/NativeBase/issues/1010#issuecomment-448201520