2016-06-09 74 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

嘿,很高兴工作。我已经更新了答案以提供更好的解释。 –