reagieren nativ kann Komponente nicht angezeigt werden

Question

Ich bin neu in Native reagieren. Ich entwickle eine einfache App, kann aber die Tabs-Komponente nicht anzeigen.

index.ios.js:

import React, { Component } from 'react'; 
import { AppRegistry } from 'react-native'; 
import Index from './app/Index'; 

export default class App1 extends Component { 
    render() { 
    return (
     <Index /> 
    ); 
    } 
} 

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

app/Index.js:

import React, { Component } from 'react'; 
import { View, Text, StyleSheet } from 'react-native'; 
import Tabs from './Router'; 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    backgroundColor: 'red', 
    }, 
}); 

export default class Index extends Component { 
    render() { 
    return (
     <View style={styles.container}> 
     <View><Tabs /></View> 
     </View> 
    ); 
    } 
} 

app/Router.js (Tabs Komponente):

import React from 'react'; 
import { TabNavigator } from 'react-navigation'; 
import { Icon } from 'react-native-elements'; 
import Calendar from './screens/Calendar'; 
import RecycleLocation from './screens/RecycleLocation'; 

const Tabs = TabNavigator({ 
    Calendar: { 
    screen: Calendar, 
    navigationOptions: { 
     tabBar: { 
     icon: ({ tintColor }) => <Icon type="font-awesome" name="calendar" size={24} color={tintColor} />, 
     }, 
    }, 
    }, 
    RecycleLocation: { 
    screen: RecycleLocation, 
    navigationOptions: { 
     tabBar: { 
     label: 'Recycle Location', 
     icon: ({ tintColor }) => <Icon type="font-awesome" name="map" size={24} color={tintColor} />, 
     }, 
    }, 
    }, 
}); 

export default Tabs; 

In app/Index.js, wenn ich das tue, funktioniert es gut:

export default class Index extends Component { 
    render() { 
    return (
     <Tabs /> 
    ); 
    } 
} 

Irgendeine Idee, was ich hier falsch mache?

Answer 1

Verwaltet, um es durch Entfernen von View-Element um Tabs-Komponente zu arbeiten.

export default class Index extends Component { 
    render() { 
    return (
     // <Tabs /> 
     <View style={styles.container}> 
     <View><StatusBarBackground /></View> 
     <Tabs /> 
     </View> 
    ); 
    } 
} 

immer noch verwirrt, warum Tabs nicht mit Blick Elemente um ihn herum arbeiten.