3
respostas

Tela branca no android apos configurações do Navigator

Ao finalizar a instalação do Navigator (https://wix.github.io/react-native-navigation/#/installation-android) o mesmo apresenta tela branca. Alguma dica do que pode ser já que não é apresentado erro no console? ainda vale a pena usar o Navigator? caso não, qual a melhor alternativa?

3 respostas

Fala George, tudo bem ?

Você encerrou e rodou novamente o processo do react packager, pra trackear os novos arquivos? Isso acontece muito quando acabamos de configurar a app pra usar a lib de navegação, mas ainda não alteramos nosso código de subida da app (tem até um trecho no curso que mostra algo parecido - https://cursos.alura.com.br/course/react-native-parte-2/task/35775 aos 13min de vídeo). Dê uma olhada se o código que registra o componente principal foi atualizado pra usar o Navigation ao invés do que fazíamos antes com AppRegistry. É necessário que a própria lib de navegação reconheça os componentes da app.

Caso persista o problema poste aqui novamente. Alguns releases recentes do React Native tem causado conflitos não só no uso de libs de terceiros, como também nas próprias APIs nativas da ferramenta.

Abraço!

Boa noite George, tudo bem?

A documentação diz que a classe deve estar dessa forma:

//+ imports adicionais necessários import com.reactnativenavigation.NavigationApplication;

public class MainApplication extends NavigationApplication {

@Override public boolean isDebug() { // Make sure you are using BuildConfig from your own application return BuildConfig.DEBUG; }

protected List getPackages() { // Add additional packages you require here // No need to add RnnPackage and MainReactPackage return Arrays.asList( // eg. new VectorIconsPackage() ); }

@Override public List createAdditionalReactPackages() { return getPackages(); } }

E que a partir do React Native 0.49 é usado apenas o arquivo 'index.js' então deve adicionar mais um trecho de código na classe:

Also, add the following

@Override public String getJSMainModuleName() { return "index"; }

Caso não tenha adicionado ou não tenha excluído o trecho anterior da classe que usa esse método, o React native navigation parece renderizar por padrão o arquivo index.android.js(no caso do Android) por isso precisa da implementação desse método adicional para sobrescrever o arquivo inicial chamado. Você pode ver o arquivo que esta sendo renderizado ao iniciar o pacote (comando react-native start), fica algo como isso no terminal:

Looking for JS files in /home/lucas/workspace/react-native/InstaluraMobile

Metro Bundler ready.

Loading dependency graph, done. BUNDLE [android, dev] ./index.js ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ 100.0% (500/500), done.

Nesse exemplo esta chamando o index.js, caso o seu esteja 'index.android.js' provavelmente você utiliza o React Native 0.49 ou acima, nesse caso é apenas adicionar o método mostrado na documentação, retirar os métodos antigos e reiniciar o pacote que o problema deve ser resolvido.

Abraço!

Boa noite estou com o mesmo problema que o George, já fiz o que Lucas Santos sugeriu mas ainda continuo com o problema de tela branca estou na versão 0.55.1 do react-native. Mesmo dando sucesso no terminal: BUNDLE [android, dev] ./index.js ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ 100.0% (500/500), done.

vou deixar aqui como esta minha main e meu index.js caso ajude em algo.

Main

public class MainApplication extends NavigationApplication implements ReactApplication {

@Override public boolean isDebug() { // Make sure you are using BuildConfig from your own application return BuildConfig.DEBUG; }

protected List getPackages() { // Add additional packages you require here // No need to add RnnPackage and MainReactPackage return Arrays.asList( // eg. new VectorIconsPackage() ); }

@Override public List createAdditionalReactPackages() { return getPackages(); }

@Override public String getJSMainModuleName(){ return "index"; } }


Index

import { Navigation } from 'react-native-navigation'; import Feed from './src/components/Feed'; import Login from './src/screens/Login';

export default () => { Navigation.registerComponent('Login', () => Login); Navigation.registerComponent('Feed', () => Feed);

Navigation.startSingleScreenApp({ screen:{ screen: 'Login', title: 'Login', } }); }