2016-06-09 58 views
0

所以我的應用程序是非常基本的:不理解NavigatorIOS陣營Naitive

import React, { Component } from 'react'; 
import Landing from './App/pages/landing.js'; 

import { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
    TouchableOpacity, 
    NavigatorIOS 
} from 'react-native'; 

class twitterQue extends Component { 

    _enter() { 
    console.log('Hey Girl'); 
    } 

    render() { 
    return (
     <NavigatorIOS 
     initialRoute={{ 
      component: Landing, 
      title: 'Welcome!', 
      passProps: {}, 
     }} 
     /> 
    ); 
    } 
} 

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

然後我有一個登陸組件:

import React, { Component } from 'react'; 
import Button from '../components/button/buttons.js'; 

import { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
    TouchableOpacity 
} from 'react-native'; 

class Landing extends Component { 

    _enter() { 
    console.log('Hey Girl'); 
    } 

    render() { 
    return (
     <View style={styles.container}> 
     <Text style={styles.welcome}> 
      Twitter Que 
     </Text> 
     <Button type={"primary"} buttonWidth={240} onPress={() => this._enter()}>Que Up Some Tweets!</Button> 
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#F5FCFF', 
    }, 
    welcome: { 
    fontSize: 20, 
    textAlign: 'center', 
    margin: 10, 
    }, 
}); 

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

module.exports = Landing; 

沒什麼時髦。沒有任何東西呈現給頁面,並且沒有錯誤。該應用程序加載,我看到「歡迎!」因爲標題,但(Landing)組件不顯示。 我錯過了什麼嗎?

如果我將所有來自Landing render的東西移動到index.js render它的作品。我誤解了docs

回答

1

嘗試增加style={{flex:1}}到NavigatorIOS:

<NavigatorIOS 
    style={{flex:1}} 
    initialRoute={{ 
     component: Landing, 
     title: 'Welcome!', 
     passProps: {}, 
    }} 
    /> 

NavigatorIOS沒有默認樣式開箱。所以基本上沒有默認的寬度或高度指定。這意味着如果您沒有指定寬度和高度,或者彈性值,那麼它將不會顯示在您的視圖中。

+1

工作正常,但是您能否更新您的答案以表明其工作原理? – TheWebs

+0

嘿,很高興工作。我已經更新了答案以提供更好的解釋。 –