ios - stacknavigator - navegacion en react native

El componente no se procesará en NavigatorIOS-React Native

Question

No puedo hacer que esta simple prueba NavigatorIOS funcione. La consola inicia sesión en My View triggeres, y puedo hacer que se muestre si omito el componente NavigatorIOS y renderizo MyView directamente. Sin embargo, cuando MyView se activa desde un componente dentro del componente NavigatorIOS, no generará nada más que ''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

Agregue el estilo de contenedor a NavigatorIOS, necesita ser flexible: 1 para mostrar el componente hijo correctamente (tuve el mismo problema).

Answer 2

Me encontré con el mismo problema, mi error fue en los estilos:

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

Tuve que eliminar justifyContent y alignItems desde allí. Problema resuelto para mí.

Answer 3

Me encuentro con el mismo problema. Para mí, ese es el problema del estilo. Creo y uso una nueva propiedad de estilo containerNV para NavigatorIOS. Eso resolvió mi problema.

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

Answer 4

También tuve un problema similar (estúpidamente) ya que le había dado al NavigatorIOS un color de fondo, lo que significaba que cubría el componente real dentro de él por alguna razón.

Answer 5

Tenía el mismo problema. Nada estaba renderizando dentro de mi pantalla principal. Después de 2 horas, decidí eliminar el elemento <View> que estaba envolviendo mi navegador, y de repente todo funcionó.

En pocas palabras, pasé de esto:

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

a esto

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

Answer 6

Tuve el mismo problema. Resultó que tuve que agregar un margen a la parte superior de la vista dentro del componente MyView.

Prueba esto:

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 7

Tuve un problema similar cuando uso Navigator, y nada de ayuda con las respuestas. Entonces uso this.forceUpdate (); forzar la actualización en la función de presionar un botón

Answer 8

Tuve un problema similar. Agregué lo siguiente a mi hoja de estilo:

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

y luego le dio al componente NavigatorIOS el estilo de wrapper . Eso solucionó el problema.