Navegação personalizada com o componente Navigator no React-Native

158

Estou explorando as possibilidades do React Native ao desenvolver um aplicativo de demonstração com navegação personalizada entre visualizações com a ajuda do Navigatorcomponente .

A classe principal do aplicativo renderiza o navegador e o renderSceneretorno interno passa o componente:

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 enquanto, o aplicativo contém duas visualizações:

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>
        );
    }
}

O que eu quero descobrir é:

  • Vejo nos registros que, ao pressionar "ir para o feed", renderSceneé chamado várias vezes, embora a exibição seja renderizada corretamente uma vez. É assim que a animação funciona?

    index.ios.js:57 Object {name: 'WelcomeView', component: function}
    index.ios.js:57 Object {name: 'FeedView', component: function}
    // renders Feed View
  • Geralmente, minha abordagem está em conformidade com a maneira React, ou pode ser melhorada?

O que eu quero alcançar é algo semelhante, NavigatorIOSmas sem a barra de navegação (no entanto, algumas visualizações terão sua própria barra de navegação personalizada).

Kosmetika
fonte
1
@ericvicenti, este exemplo deve ser incluído na página Navegador nos documentos. É mais completo e fornece uma imagem melhor de como usar o componente Navigator no contexto.
greatwitenorth
Apenas tentando o seu exemplo, a cena deve mudar automaticamente quando um push do navegador acontece? Para mim, seu exemplo nunca mostra a visualização de feed! texto, então eu estou querendo saber se algo mudou nas versões recentes.
19416 Ian

Respostas:

74

Sua abordagem deve funcionar muito bem. Em grandes aplicativos no Fb, evitamos chamar o require()componente for scene até renderizá-lo, o que pode economizar um pouco de tempo de inicialização.

A renderScenefunção deve ser chamada quando a cena é empurrada pela primeira vez para o Navegador. Também será chamado para a cena ativa quando o Navegador for renderizado novamente. Se você renderScenefor chamado várias vezes após a push, provavelmente é um erro.

O navegador ainda está em andamento, mas se você encontrar algum problema, arquive no github e me marque! (@ericvicenti)

Eric Vicenti
fonte
1
Olá @Eric, consulte este link: - stackoverflow.com/questions/44538306/…
sid
2

Navigatorestá obsoleto agora, RN 0.44.0você pode usar react-native-deprecated-custom-componentspara oferecer suporte ao aplicativo existente que está usando Navigator.

Vivek Maru
fonte
1

Como já mencionado anteriormente, o Navigator foi descontinuado desde a v0.44, mas ainda pode ser importado para suportar aplicativos mais antigos:

O Navegador foi removido do pacote principal do React Native na versão 0.44. O módulo foi movido para um componente de reação-nativo-personalizado pacote que pode ser importado pelo seu aplicativo para manter a compatibilidade com versões anteriores.

Para ver os documentos originais do Navigator, mude para uma versão mais antiga dos documentos.

Conforme os documentos (React Native v0.54), Navegando entre telas . Agora, é recomendável usar o React Navigation se você está apenas começando, ou o NavigatorIOS para aplicativos não Android

Se você está apenas começando a navegar, provavelmente desejará usar o React Navigation . O React Navigation fornece uma solução de navegação fácil de usar, com a capacidade de apresentar navegação de pilha comum e padrões de navegação com guias no iOS e no Android.

...

Se você estiver apenas segmentando o iOS, também poderá consultar o NavigatorIOS como uma maneira de fornecer uma aparência nativa com uma configuração mínima, pois fornece um invólucro em torno da classe UINavigationController nativa.

NB : No momento de fornecer esta resposta, o React Native estava na versão 0.54

JSON C11
fonte
0

O componente Navigator está obsoleto agora. Você poderia usar react-native-router-flux por askonov, ele tem uma variedade enorme e suporta muitas animações diferentes e é eficiente

Divye Shah
fonte