Navegación personalizada con el componente Navigator en React-Native

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 Navigatorcomponente .

La clase de aplicación principal representa el navegador y el interior renderScenedevuelve 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 alimentar" renderScenese llama 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 View
  

• Por lo general, ¿mi enfoque se ajusta a la forma de React o se puede hacer mejor?

Lo que quiero lograr es algo similar NavigatorIOSpero sin la barra de navegación (sin embargo, algunas vistas tendrán su propia barra de navegación personalizada).

Tu enfoque debería funcionar muy bien. En aplicaciones grandes en Facebook, evitamos llamar al require()componente de escena hasta que lo renderizamos, lo que puede ahorrar un poco de tiempo de inicio.

La renderScenefunción debe llamarse cuando la escena se empuja por primera vez al navegador. También se llamará para la escena activa cuando el navegador se vuelva a renderizar. Si ves que renderScenete llaman varias veces después de a push, probablemente sea un error.

El navegador todavía es un trabajo en progreso, pero si encuentra algún problema con él, por favor regístrelo en github y etiquéteme. (@ericvicenti)

Navigatorestá en desuso ahora en RN 0.44.0que puede utilizar react-native-deprecated-custom-componentsen su lugar para admitir su aplicación existente que está utilizando Navigator.

Como otros han mencionado 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 ha eliminado del paquete principal React Native en la versión 0.44. El módulo se ha movido a un paquete react-native-custom-components 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 sean de Android

Si recién está comenzando con la navegación, probablemente desee utilizar React Navigation . React Navigation proporciona una solución de navegación fácil de usar, con la capacidad de presentar patrones de navegación de pila común y navegación con pestañas tanto en iOS como en Android.

...

Si solo tiene como objetivo iOS, es posible que también desee consultar NavigatorIOS como una forma de proporcionar una apariencia nativa con una configuración mínima, ya que proporciona una envoltura alrededor de la clase nativa UINavigationController.

NB : En el momento de proporcionar esta respuesta, React Native estaba en la versión 0.54

El componente Navigator está obsoleto ahora. Puede usar react-native-router-flux de askonov, tiene una gran variedad y admite muchas animaciones diferentes y es eficiente