Question

我正在尝试使用本机库在本机应用中实现制表符。我收到这个我不明白的错误。 undefined不是对象（评估'child.props.heading.props'）

这是我导入页面的代码。

import React, { Component } from 'react';
import {AppRegistry} from 'react-native';
import {Tabs} from 'native-base';

import TabOne from './TabOne';
import TabTwo from './TabTwo';
//import Head from '../app/Header';
export default class yolo extends Component{
  render(){
    return(
      <Tabs>
          <TabOne tabLabel='Groups'/>
          <TabTwo tabLabel='Create Group'/>
      </Tabs>
    );
  }
}

AppRegistry.registerComponent('yolo', () => yolo);

这是页面的代码。两者都相同

import React,{Component} from 'react';
import{
  Text
} from 'react-native';
export default class TabTwo extends Component {
  render(){
    return(
      <Text>Hello</Text>
    );
  }
}

Answer 1

这是因为Native base选项卡用作选项卡栏视图。要在选项卡中导航，您仍需要使用类似Router-Flux的东西。

原生基本标签只会帮助您以更灵活的方式设置标签栏的样式。

这会有所帮助：https://github.com/aksonov/react-native-router-flux

Answer 2

有一种替代方法可以使用反应原生的选项卡导航为您提供更多选项。我已经尝试过它并且对我来说很好。 https://reactnavigation.org/docs/navigators/tab

Answer 3

通过官方示例，您必须将每个Tabs设置放在Container内，无论您在Container以外使用过http://rawgit.com/GeekyAnts/native-base-docs/v2.2/_book/Components.html#tabs-def-headref

return (
    <Container>
        <Header hasTabs />
        <Tabs>
            <Tab heading="Tab1">
                <Tab1 />
            </Tab>
            <Tab heading="Tab2">
                <Tab2 />
            </Tab>
            <Tab heading="Tab3">
                <Tab3 />
            </Tab>
        </Tabs>
    </Container>
);

Header标记是可选的。

尝试使用原生基础实现制表符

3 个答案: