export default class App extends Component {
constructor(props) {
super(props);
this.state = { visible: true,};
}
hideSpinner=()=> {
this.setState({ visible: false });
}
showSpinner=()=> {
this.setState({ visible: true });
}
render() {
return (
<View style={{ flex: 1 }}>
<StatusBar hidden />
<WebView
onLoadStart={() => (this.showSpinner())}
onLoad={() => this.hideSpinner()}
style={{ flex: 1 }}
source={{ uri: 'https://treinamento.viashopmoda.com.br/' }}
renderError={() =>
<View style={styles.loadingOrErrorView}>
<View style={styles.container}>
<Image source={logo} style={{width:280,height:200}}/>
<Text style={{fontSize:20,marginTop:15}}>Você está sem conexão</Text>
<TouchableOpacity style={styles.botao} onPress={()=>recarregar()}>
<Text style={{color:'white',fontSize:18}}>Tentar novamente <FontAwesome name="repeat" size={18} color="white" /></Text>
</TouchableOpacity>
</View>
</View>
}
/>
{this.state.visible && (
<View style={styles.fundo}>
<ActivityIndicator style={styles.telac} size="large" color="ccc"/>
</View>
)}
</View>
);
}
}
You mean transform the class to a functional component? You should use useState
. So it can be something like:
function App {
const [visible, setVisible] = useState(true);
hideSpinner=()=> {
setVisible(false)
}
showSpinner=()=> {
setVisible(true)
}
return (
<View style={{ flex: 1 }}>
<StatusBar hidden />
<WebView
onLoadStart={() => (showSpinner())}
onLoad={() => hideSpinner()}
style={{ flex: 1 }}
source={{ uri: 'https://treinamento.viashopmoda.com.br/' }}
renderError={() =>
<View style={styles.loadingOrErrorView}>
<View style={styles.container}>
<Image source={logo} style={{width:280,height:200}}/>
<Text style={{fontSize:20,marginTop:15}}>Você está sem conexão</Text>
<TouchableOpacity style={styles.botao} onPress={()=>recarregar()}>
<Text style={{color:'white',fontSize:18}}>Tentar novamente <FontAwesome name="repeat" size={18} color="white" /></Text>
</TouchableOpacity>
</View>
</View>
}
/>
{visible && (
<View style={styles.fundo}>
<ActivityIndicator style={styles.telac} size="large" color="ccc"/>
</View>
)}
</View>
);
}
1 Like
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.