試圖實現使用本地基地的標籤反應原生

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標籤是可選的。