javascript - navegacion - Navegación personalizada con componente Navigator en React-Native

react navigation

Question

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 de aplicación principal representa el navegador y dentro de 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 descubrir es:

• Veo en los registros que al presionar "ir a alimentar" renderScene se llama varias veces, aunque la vista se representa 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 a NavigatorIOS pero sin la barra de navegación (sin embargo, algunas vistas tendrán su propia barra de navegación personalizada).

Answer 1

Como otros han mencionado anteriormente, Navigator ha quedado en desuso desde 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

Answer 2

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

Answer 3

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

Se debe renderScene función renderScene 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 ve que se llama a renderScene varias veces después de un push , entonces 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)

Answer 4

Navigator está en desuso ahora en RN 0.44.0 , puede usar react-native-deprecated-custom-components en su lugar para admitir su aplicación existente que está usando Navigator .