试图实现使用本地基地的标签反应原生

Question

我想实现使用本地基地的反应原生应用中的选项卡。 我收到这个错误，我不明白。 未定义不是一个对象（评估'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

这是因为本机基本选项卡用作选项卡栏视图。对于标签中的导航，你仍然需要使用类似Router-Flux的东西。

本机基本选项卡将帮助您以更灵活的方式设置标签栏的样式。

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

Answer 2

有，让你在使用反应native.I已经尝试过了，对我来说工作正常的标签导航，更多的选择的替代方案。 https://reactnavigation.org/docs/navigators/tab

Answer 3

我自己使用原生基础。复制粘贴这段代码片段并检查它是否有效。

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> 
       <Tab heading="Groups"> 
        <TabOne /> 
       </Tab> 
       <Tab heading="Create Group"> 
        <TabTwo /> 
       </Tab> 
     </Tabs> 
    ); 
    } 
} 

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

Answer 4

官方例子，你必须把每一个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标签是可选的。