I have my views already finished, but some must load several data before being able to be shown, that's why you notice a delay going from one view to another, I would like that by pressing the button that takes me to the other view, it shows an icon of loading and that when the new view loads all its data then if it shows it. Does anyone have any idea how to achieve this?
From this view
I must go to this
It should be noted that I am using it for react-navigation
with the code that you have shared I can not offer you a response oriented to your project, but in summary what you have to do is the following:
In the constructor of the target view, you have to have a status variable that indicates that it is loading:
constructor(props) {
super(props);
this.refs = null;
this.state = {
loading:true,
tablaConMisDatos:[]
};
}
In the componentDidMount () or componentWillMount () method you must call the method that loads your data, imagine that you make a call to a method that returns a promise after making a query in a webservice:
componentDidMount()
{
getMyData().then((misDatos)=>{
this.setState({loading: false, tablaConMisDatos: misDatos});
}).catch((err)=>{
//mostrar algo cuando ocurra un error, lo puedes tratar aquí
console.log(err);
this.setState({loading: false});
})
}
Finally, in your render () method, you must indicate that it shows something else while it is loading, so that:
render()
{
if(this.state.loading)
{
return (<Text>Cargando...</Text>);
}
return (
//Tu código antiguo aquí
)
}
This way you make sure you only show the view once you have the data.
I hope it has helped you.