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.