2
respostas

Problema com AppRegistry

Até essa aula, não estava usando o AppRegistry, então, no final do arquivo apenas exportava a classe 'InstaluraMobile'. No entanto, ao passar a utilizar o AppRegistry, o sistema começou a apresentar um erro :

Unhandled JS Exception: Invariant Violation: _default2(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

This error is located at:
    in _default2 (at renderApplication.js:40)
    in RCTView (at View.js:35)
    in View (at AppContainer.js:98)
    in RCTView (at View.js:35)
    in View (at AppContainer.js:115)
    in AppContainer (at renderApplication.js:39)

RCTFatal
-[RCTExceptionsManager reportFatalException:stack:exceptionId:]
__invoking___
-[NSInvocation invoke]
-[NSInvocation invokeWithTarget:]
-[RCTModuleMethod invokeWithBridge:module:arguments:]
facebook::react::invokeInner(RCTBridge*, RCTModuleData*, unsigned int, folly::dynamic const&)
facebook::react::RCTNativeModule::invoke(unsigned int, folly::dynamic&&, int)::$_0::operator()() const
invocation function for block in facebook::react::RCTNativeModule::invoke(unsigned int, folly::dynamic&&, int)
_dispatch_call_block_and_release
_dispatch_client_callout
_dispatch_lane_serial_drain
_dispatch_lane_invoke
_dispatch_workloop_worker_thread
_pthread_wqthread
start_wqthread

Este é o código do App,js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {
  AppRegistry,
  StyleSheet,
  FlatList,
  Platform
} from 'react-native';

import Post from './src/components/Post';

class InstaluraMobile extends Component {

        constructor() {
            super();
            this.state = {
                fotos: []
            }
        }

        componentDidMount() {
            fetch('https://instalura-api.herokuapp.com/api/public/fotos/rafael')
                .then(resposta => resposta.json())
                .then(json => this.setState({fotos: json}));
        }

        like(idFoto) {
          const foto = this.state.fotos.find(foto => foto.id === idFoto)

          let novaLista = []
          if(!foto.likeada) {
            novaLista = [
              ...foto.likers,
              {login: 'meuUsuario'}
            ]
          } else {
            novaLista = foto.likers.filter( liker => {
                return liker.login !== 'meuUsuario'
              }
            )
          }
          const fotoAtualizada = {
              ...foto,
              likeada: !foto.likeada,
              likers: novaLista
          }
          const fotos = this.state.fotos.map(foto => foto.id === fotoAtualizada.id ? fotoAtualizada : foto)
          this.setState({fotos});
        }

        adicionaComentario(idFoto, valorComentario, inputComentario) {
          if(valorComentario === '')
            return;

            const foto = this.state.fotos.find(foto => foto.id === idFoto)

            const novaLista = [...foto.comentarios, {
              id: valorComentario,
              login: 'meuUsuario',
              texto: valorComentario
            }];

          const fotoAtualizada = {
            ...foto,
            comentarios: novaLista
          }

          const fotos = this.state.fotos.map(foto => foto.id === fotoAtualizada.id ? fotoAtualizada : foto)

          this.setState({fotos});
          inputComentario.clear();

        }

        render() {
            return (
                <FlatList style={styles.container}
                    keyExtractor={item => String(item.id)}
                    data={this.state.fotos}
                    renderItem={ ({item}) =>
                        <Post foto={item}
                          likeCallback={this.like.bind(this)}
                          comentarioCallback={this.adicionaComentario.bind(this)}/>
                    }
                />
            );
        }
    }
const margem = Platform.OS == 'ios' ? 30 : 0;
const styles = StyleSheet.create({
  container: {
    marginTop: margem
  }
})

//export default InstaluraMobile
export default () => {
  AppRegistry.registerComponent('InstaluraMobile', () => InstaluraMobile);
}

Se eu tirar a export default com o 'AppRegistry' e utilizar o 'xport default InstaluraMobile', o app funciona normalmente. Quando eu coloco 'AppRegistry.registerComponent('InstaluraMobile', () => Login)', o mesmo erro acontece.

2 respostas

Valdenir, boa tarde!

Olha eu acredito que possa ser pelo fato de faltar um return na seguinte linha

export default () => {
  AppRegistry.registerComponent('InstaluraMobile', () => InstaluraMobile);
}

Deveria estar assim:

export default () => {
  return AppRegistry.registerComponent('InstaluraMobile', () => InstaluraMobile);
}

Espero ter ajudado e bons estudos!

Não funcionou. O meu código está idêntico ao da Aula.