Navegación personalizada con 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 principal de la aplicación representa el navegador y el renderScenecomponente interno devuelve:

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 descubrir 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
  

• En general, ¿mi enfoque se ajusta a la forma Reaccionar, 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).

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

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

El navegador sigue siendo un trabajo en progreso, pero si encuentra algún problema con él, ¡archívelo en github y márqueme! (@ericvicenti)

Navigatorahora está en desuso y RN 0.44.0puede usarlo react-native-deprecated-custom-componentspara admitir su aplicación existente que está usando Navigator.

Como otros han mencionado anteriormente, Navigator ha quedado en desuso desde la v0.44, pero aún puede importarse 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 Android

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

...

Si solo está apuntando a 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 un contenedor alrededor de la clase UINavigationController nativa.

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

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