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

javascript ios navigation reactjs react-native 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

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

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

Respostas: