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

内容未显示在nativebase中的<tabs>

2 个答案: