Estoy explorando las posibilidades de React Native mientras desarrollo una aplicación de demostración con navegación personalizada entre vistas con la ayuda del componente Navigator .
La clase principal de la aplicación representa el navegador y dentro renderScene devuelve el componente pasado:
class App extends React.Component { render() { return ( <Navigator initialRoute={{name: 'WelcomeView', component: WelcomeView}} configureScene={() => { return Navigator.SceneConfigs.FloatFromRight; }} renderScene={(route, navigator) => { // count the number of func calls console.log(route, navigator); if (route.component) { return React.createElement(route.component, { navigator }); } }} /> ); } }Por ahora, la aplicación contiene dos vistas:
class FeedView extends React.Component { render() { return ( <View style={styles.container}> <Text> Feed View! </Text> </View> ); } } class WelcomeView extends React.Component { onPressFeed() { this.props.navigator.push({ name: 'FeedView', component: FeedView }); } render() { return ( <View style={styles.container}> <Text style={styles.welcome}> Welcome View! </Text> <Text onPress={this.onPressFeed.bind(this)}> Go to feed! </Text> </View> ); } }Lo que quiero averiguar es:
Veo en los registros que al presionar "ir a la fuente" se llama a renderScene varias veces, aunque la vista se muestra correctamente una vez. ¿Es así como funciona la animación?
index.ios.js:57 Object {name: 'WelcomeView', component: function} index.ios.js:57 Object {name: 'FeedView', component: function} // renders Feed ViewEn general, ¿mi enfoque se ajusta a la forma de React, o se puede hacer mejor?
Lo que quiero lograr es algo similar a NavigatorIOS pero sin la barra de navegación (sin embargo, algunas vistas tendrán su propia barra de navegación personalizada).
Su enfoque debería funcionar muy bien. En aplicaciones grandes en Facebook, evitamos llamar a require() para el componente de escena hasta que lo procesamos, lo que puede ahorrar un poco de tiempo de inicio.
La función renderScene debe llamarse cuando la escena se envía por primera vez al Navegador. También se llamará a la escena activa cuando se vuelva a renderizar el Navegador. Si ve que se llama a renderScene varias veces después de un push , entonces probablemente se trate de un error.
El navegador aún es un trabajo en progreso, pero si encuentra algún problema con él, ¡archive en github y etiquéteme! (@ericvicenti)
Navigator está obsoleto ahora en RN 0.44.0 , puede usar react-native-deprecated-custom-components en su lugar para admitir su aplicación existente que usa Navigator .
Como otros mencionaron anteriormente, Navigator ha quedado obsoleto desde la versión 0.44, pero aún se puede importar para admitir aplicaciones más antiguas:
Navigator se eliminó del paquete principal de React Native en la versión 0.44. El módulo se ha movido a un paquete de componentes personalizados nativos de reacción que su aplicación puede importar para mantener la compatibilidad con versiones anteriores.
Para ver los documentos originales de Navigator, cambie a una versión anterior de los documentos.
Según los documentos (React Native v0.54) Navegando entre pantallas . Ahora se recomienda usar React Navigation si recién está comenzando, o NavigatorIOS para aplicaciones que no son de Android.
Si recién está comenzando con la navegación, probablemente querrá usar React Navigation . React Navigation proporciona una solución de navegación fácil de usar, con la capacidad de presentar patrones comunes de navegación de pila y navegación con pestañas tanto en iOS como en Android.
...
Si solo tiene como objetivo iOS, también puede consultar NavigatorIOS como una forma de proporcionar una apariencia nativa con una configuración mínima, ya que proporciona un contenedor alrededor de la clase nativa UINavigationController.
NB : en el momento de proporcionar esta respuesta, React Native estaba en la versión 0.54