內容不顯示爲<Tabs>在nativebase

Question

我正在使用"native-base": "^2.1.3"和"react-native": "0.44.0"而我的選項卡的內容不顯示，我不知道如何解決此問題。

import HomeTab from '../components/homeTab'; 

render() { 
    return (
     <Drawer 
     ref={(ref) => { this._drawer = ref; }} 
     content={<Sidebar navigator={this._navigator}/>} 
     onClose={() => this.closeDrawer()} 
     > 
     <Container>   
      <Header style={styles.header} hasTabs> 
      <Tabs tabBarUnderlineStyle={styles.underLine}> 
       <Tab 
       activeTabStyle={styles.header} 
       activeTextStyle={styles.text} 
       tabStyle={styles.header} 
       textStyle={styles.text} 
       heading="Home" 
       > 
       <HomeTab /> 
       </Tab> 
       <Tab 
       activeTabStyle={styles.header} 
       activeTextStyle={styles.text} 
       tabStyle={styles.header} 
       textStyle={styles.text} 
       heading="Something else" 
       > 
       <Button><Text>Hello?</Text></Button> 
       </Tab> 
      </Tabs> 
      </Header> 
     </Container> 
     </Drawer> 
    ); 
    } 
} 

我只是想看看標籤欄下顯示的東西，但沒有真正出現兩個選項卡和別的標籤。 HomeTab包含的唯一的東西是

render() { 
    return (
     <Container> 
     <Content> 
      <Text>This is Home Tab</Text> 
     </Content> 
     </Container> 
    ); 
    } 

有沒有人有同樣的問題，我知道如何解決這個問題？

謝謝大家的時間。

EDITED --------------------------------------------- -----------------

我的package.json樣子..

"dependencies": { 
    "axios": "^0.16.1", 
    "native-base": "^2.1.4", 
    "react": "16.0.0-alpha.6", 
    "react-native": "^0.44.2", 
    "react-native-router-flux": "^3.39.1", 
    "react-redux": "^5.0.5", 
    "redux": "^3.6.0", 
    "redux-form": "^6.7.0", 
    "redux-thunk": "^2.2.0" 
    }, 
    "devDependencies": { 
    "babel-jest": "20.0.3", 
    "babel-preset-react-native": "1.9.2", 
    "jest": "20.0.3", 
    "react-test-renderer": "16.0.0-alpha.6" 
    }, 
    "jest": { 
    "preset": "react-native" 
    } 

，並沒有什麼特別的，我模擬器除了說

2017-05-29 17:22:07.068987-0700 YOUR_APP[54929:28003814] [] nw_connection_get_connected_socket_block_invoke 2947 Connection has no connected handler。

Answer 1

你應該移動<Tabs>外<Header>

檢查例如從NativeBase-KitchenSink

Answer 2

嘗試使用天然鹼基片來看下面的代碼

render() { 
    return (
     <Drawer 
     ref={(ref) => { this._drawer = ref; }} 
     content={<Sidebar navigator={this._navigator}/>} 
     onClose={() => this.closeDrawer()} 
     > 
     <Container>   
      <Header style={styles.header} hasTabs> 
      <Tabs> 
       <Content tabLabel='Home' style={{ padding: 10 }}> 
        <Text>This is Home Tab</Text> 
       </Content> 
       <Content tabLabel='Work' style={{ width: width*.42,padding: 10 }}> 
        <Text>This is Work Tab</Text> 
       </Content> 
      </Tabs> 
      </Header> 
     </Container> 
     </Drawer> 
    ); 
    } 
} 

上面的代碼是不工作然後更新您的天然鹼基NPM