Componente non esegue il rendering all'interno di NavigatorIOS - React Native

Question

Non riesco a far funzionare questo semplice test di NavigatorIOS. Il log della console in My View si attiva e posso visualizzarlo se ignoro il componente NavigatorIOS e eseguo il rendering direttamente di MyView. Tuttavia, quando MyView viene attivato da un componente all'interno del componente NavigatorIOS, non renderà nient'altro che "My NavigatorIOS test".

var React = require('react-native'); 
var { 
    AppRegistry, 
    StyleSheet, 
    NavigatorIOS, 
    Text, 
    View, 
} = React; 


var navigation = React.createClass ({ 
    render: function() { 
    return (
     <NavigatorIOS 
      initialRoute={{ 
       component: MyView, 
       title: 'My NavigatorIOS test', 
       passProps: { myProp: 'foo' }, 
     }}/> 
    ); 
    }, 
}); 


var MyView = React.createClass({ 
    render: function(){ 
    console.log('My View render triggered'); 
    return (
     <View style={styles.container}> 
     <Text style={styles.welcome}> 
      Hello there, welcome to My View 
     </Text> 
     </View> 
    ); 
    } 
}); 


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


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

Answer 1

Aggiungere lo stile contenitore a NavigatorIOS, deve essere flessibile: 1 per mostrare correttamente il componente figlio (ho avuto lo stesso problema).

Answer 2

Ho avuto lo stesso problema. Ho scoperto che dovevo aggiungere un margine alla parte superiore della vista all'interno del componente MyView.

Prova questo:

var React = require('react-native'); 
var { 
    AppRegistry, 
    StyleSheet, 
    NavigatorIOS, 
    Text, 
    View, 
} = React; 


var navigation = React.createClass ({ 
    render: function() { 
    return (
     <NavigatorIOS 
      style={styles.container} 
      initialRoute={{ 
       component: MyView, 
       title: 'My NavigatorIOS test', 
       passProps: { myProp: 'foo' }, 
     }}/> 
    ); 
    }, 
}); 


var MyView = React.createClass({ 
    render: function(){ 
    console.log('My View render triggered'); 
    return (
     <View style={styles.wrapper}> 
     <Text style={styles.welcome}> 
      Hello there, welcome to My View 
     </Text> 
     </View> 
    ); 
    } 
}); 


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


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

Answer 3

Ho avuto un problema simile. Ho aggiunto il seguente al mio foglio di stile:

... 
wrapper: { 
    flex: 1, 
}... 

e poi diedi la componente NavigatorIOS lo stile wrapper. Questo ha risolto il problema.

Answer 4

Ho incontrato lo stesso problema, il mio errore è stato negli stili:

var styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#F5FCFF', 
    } 
}); 

ho dovuto togliere justifyContent e alignItems da lì. Problema risolto per me.

Answer 5

Anch'io avevo un problema simile (stupidamente) dato che il NavigatorIOS era un colore di sfondo, il che significava che copriva il componente reale al suo interno per qualche motivo.

Answer 6

Ho riscontrato un problema simile quando utilizzo Navigator e non mi aiuta a ottenere risposte. Quindi io uso this.forceUpdate(); forzare l'aggiornamento nel pulsante premere funzione

Answer 7

Ho incontrato lo stesso problema. Per me, questo è il problema dello stile. Creo e utilizzo una nuova proprietà di stile containerNV per NavigatorIOS. Questo ha risolto il mio problema.

var styles = StyleSheet.create({ 
    containerNV: { 
    flex: 1, 
    backgroundColor: '#05FCFF', 
    } 
}); 

Answer 8

Aveva lo stesso problema. Niente era rendering all'interno del mio schermo principale. Dopo 2 ore ho deciso di rimuovere l'elemento <View> con cui stavo avvolgendo il mio navigatore e improvvisamente tutto ha funzionato.

In poche parole, sono andato da questo:

<View> 
    <NavigatorIOS 
    style={styles.container} 
    initialRoute={{ 
     component: MainPage, 
     title: 'MainPage', 
    }}/> 
</View> 

a questo

<NavigatorIOS 
    style={styles.container} 
    initialRoute={{ 
    component: MainPage, 
    title: 'MainPage', 
}}/>