2017-04-04 11 views
0

私はReact Nativeを初めて使っています。私は単純なアプリを開発していますが、Tabsコンポーネントを表示することはできません。ネイティブから反応がありません。

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); 

アプリ/ 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(タブ成分):

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; 

アプリで/ Index.js、これを行うと正常に動作します:

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

私はここで間違って何を考えている?

+0

StatusBarBackgroundとタブをエクスポートしましたか? –

+0

_ "私が返すとうまくいく" _どういう意味ですか? –

+0

トラブルシューティングのヒントあなたのコンテナスタイルに 'backgroundColor: 'red''を追加してください。 –

答えて

0

Tabコンポーネントの周りにView要素を削除することによって、機能するように管理しました。

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

タブが周囲のビュー要素では機能しない理由が混乱しています。

関連する問題