Nicht zu verstehen NavigatorIOS Reagieren Naitive

Question

So Meine app ist ziemlich einfach:

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

ich dann eine Landung Komponente haben:

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; 

Nichts zu flippig. Nichts rendert sich auf der Seite und es gibt keine Fehler. Die App lädt und ich sehe "Willkommen!" Wie der Titel aber die (Landing) Komponente nicht zeigt. Fehle ich etwas?

Wenn ich alles Ding von Landing render in index.js render verschiebe, funktioniert es. Missverstehe ich die docs?

Answer 1

Try style={{flex:1}} zu NavigatorIOS Zugabe:

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

NavigatorIOS hat keinen Standard Styling aus dem Kasten heraus. Es ist also grundsätzlich keine Standardbreite oder -höhe angegeben. Das heißt, wenn Sie keine Breite und Höhe oder einen Flex-Wert angeben, wird dieser in Ihrer Ansicht nicht angezeigt.